Google Chrome 27 – now with added voice searching

The new Chrome v27 went live today with a new voice search capability using the HTML5 media capabilities the browser asks to use my microphone and when it does it allows you to speak your query rather than type it.

It is similar to the capability which has been in Android Jelly Bean 4.2 for a while now which I find very useful and I am becoming more reliant on it – we still have some accent issue to get over though.

Below is a quick video demonstrating that it still has some hurdles to get over and some interesting results ūüôā

Kinda my point in highlighting this is really to illustrate the HTML5 media capabilities and where the browser is going. The ability to turn speech into text is not new – but to integrate it with our web applications is…

Advertisements

Why XPages should get Web Sockets

Web Sockets

Web Sockets is not “new” but it is, in the sense that it is an HTML5 standard which is not implemented yet in all browsers. For more information check out this excellent article on it. Written two years ago !!! And yet many people have not yet heard of it.

http://www.html5rocks.com/en/tutorials/websockets/basics/

So what’s the big deal? We have web polling right now….

In a nutshell Web Sockets allows for an open connection to be maintained between the server and the client. Que? So what? I hear you say…

If you think about your twitter feed, facebook update feed or your Social information stream in Connections or Notes Social, the way it works is via a one way “polling” from the browser to the server – the conversation looks something like this via an ajax request

Browser: “Do I have anything new?”
Server: “Nope”
5 seconds goes by
Browser: “Do I have anything new?”
Server: “Nope”
5 seconds goes by
Browser: “Do I have anything new?”
Server: “Nope”
5 seconds goes by
Browser: “Do I have anything new?”
Server: “Nope”
5 seconds goes by
Browser: “Do I have anything new?”
Server: “Yes here is a new message”

What this does is create a huge amount of unnecessary bandwidth on the network – and just as importantly requires the server to maintain a ton of open threads at all times to allow for the constant polling – slowing down the server – all in it is a very expensive (but necessary) methods for getting “real-time updates” to the browser client. It also it (in shall we say less¬†sophisticated¬†browsers)¬†causes a RAM increase and memory leaks – over time resulting in browser failure.

All change with Web Sockers

Web Sockets allows for an open connection – just as if your computer is on the LAN – traffic can flow both ways.

So there is no longer a need for “polling” in the same fashion.

Use Case example

If I had Web Sockets this would be the first demonstration I would do. it is directly applicable to our work environment and would :

User A

Creates an expense claim request and submits it to User B for approval.

On the server we are running a scheduled agent (or equivalent) which picks up the approval is required

User B

Logged into the intranet 3 hours ago and has not been into the expense system once.

Because she is logged into the system the supervisor has an open Web Sockets connection to the server.
The server “pushes” the new approval request to the supervisor’s browser without the need for polling and it pops up in her “stream” as a task which requires her action.

One HTTP transaction instead of many.

Other examples

Other tangible examples are :

  • Real time charting – updating your corporate stock ticker, but only when a change is necessary
  • A sidebar chat capability, changes pushed not polled
  • Web conferencing (with HTML5 audio and video tools)
  • Online games

Here’s what Jesse Gallagher told me:¬†Having a “direct feed” between the client and backing objects on the server could lead to all sorts of interesting applications, even better than the remote services in the ExtLib

Conclusion

Web Sockets is a new technology, now supported in IE10 and will provide multiple advantages to the corporate infrastructure:

  1. Significantly reduced Web based LAN traffic due to the removal of “polling” from the browser
  2. Faster servers requiring less resources due to to the reduced traffic requests
  3. It will save money and resources
  4. It will provide for a faster browser – improving user experience.

#BringWebSocketsToXPages

Auto-focus – Do it! It’s just lazy not to.

In this article I will discuss the need as a developer to use an auto-focus on your XPages. You do this when the end-user needs to type something onto your webpage and should not have to use their mouse to click in the field first.

Introduction

You’ve been there – you go to a website internal or external to your company and you have to login in or type something into the page – the search field or something of that ilk. It is the only field on the whole page and you have to use your mouse to focus on the field – frustrating beyond belief and quite frankly, lazy on the part of the developer. It is a pet peeve of mine when something as simple as one line of code can make a big difference to the first thing a user does on your site.

Can you imagine going to Google.com and having to focus on the field to get started on your search? Stupid idea – or so you would think.

Login Pages

The login page is perhaps the most obvious thing – as the developer you should ALWAYS focus on the username field – it is just lazy not to! It is harder on the user to have to click in the field and they are entering your website with an irritation on their mind already.

Auto-focus on the Username field
Auto-focus on the Username field

 

So how do we do this?

Well it depends on what takes your fancy that day…..but this is normally something you would do within some <script> tags on your web page.

Using the plain old JavaScript method

  document.getElementById("username").focus()

In Dojo

  dojo.byId("username").focus()

In jQuery

  $("#username")[0].focus()

NOTE

We use the [0] to get the DOM Node element and use the HTML focus() method
.focus() when applied to a jQuery object is an event handler which determines what happens when you focus on something  Рbe careful to use correctly

$('#target').focus(function() {
  alert('Handler for .focus() called.');
});

In HTML5

The autofocus attribute of a field is new in HTML5 (thanks to David Walsh). You can also focus on a button and other DOM objects

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

Change the name of your file with – HTML5 “Download” attribute

In this article I will show you a very simple way to change the name of a file when the user downloads it using the new HTML5 “download” attribute.

The download Attribute 

This is unfortunately only support in Chrome so far but it is coming Рthe HTML5 download attribute Рvery simple and very effective. In the old days we had to fiddle with content-type and content-disposition to rename a file on the way out of the server Рnow much easier.

What we are trying to create is HTML which looks like this

	<a href="/jQInX.zip" class="xspLink" download="MarkySampleDatabase">
		Download the sample database - with download attribute
	</a>

The download=”MarkySampleDatabase” is the important part – it changes the name of the file in the a href to be “MarkySampleDatabase”

The XPages code

The following is 8.5.3 Xpage Source Code adding the download Attribute via the attr properties of the


	<xp:link escape="true" text="Download the sample database - with download attribute" id="link1" value="http://demo.xomino.com/xomino/jQinX.nsf/SampleDB/jQInX.zip">
		<xp:this.attrs>
			<xp:attr name="download" value="MarkySampleDatabase"></xp:attr>
		</xp:this.attrs>
	</xp:link>

Demonstration

And that is pretty much it Рfrom the example which can be seen here there are two links both link to the sample jQinX.nsf sample database

Demo Page
Demo Page

Viewing the source shows us both links are the same…

The same link
The same link

But the one with the download attribute, downloads with a completely different name

Download Attribute in action
Download Attribute in action

Stencil.js – (Applying a transparent CANVAS mask) – I need some suggestions

In this article I am going to show you how I created stencil.js –¬†A technique for making a transparent mask on top of an image. But I am a little lost as to what to do with the technique now I have created it – any suggestions would be¬†gratefully¬†received and much appreciated.

Example

So I have been working on this idea for a couple of weeks and I finally figured out how to make the technique work whereby you can draw a picture ontop of a web font text (or make it look like that anyway)

Drawing a picture on top of web based text
Drawing a picture on top of web based text

I think it is kinda cool – shame the font has sharp edges and isn’t feathered but hey.

How does it work?

So what I am actually doing is taking an image

An image
An image

Drawing a “<CANVAS>” element on top of it and writing some text onto the canvas (so no IE)

Writing some text onto the canvas
Writing some text onto the canvas

Then I make all the red pixels on the canvas have opacity=0 (i.e. see through) and everything else color white with opacity 255 (not see through)

It is easier to see the effect if I make the white canvas slightly opaque – in this image you can JUST see the original as I have set it to 225 not 255.

This canvas manipulation was what I found Patrick Wied had used in making the watermark.js plugin which I wrote about earlier in the year. Each pixel in the canvas can be manipulated with the RGB value and Opacity – so I can make anything white and or transparent.

If you want to see it in actiion go to the jsFiddle I have created: http://jsfiddle.net/mdroden/aefh4/

Or if you think you can improve it – git it –¬†https://github.com/markyroden/stencil

So I need suggestions….

The plan is to turn this into a jQuery plugin – but for what purpose? Other than a demonstration of it can be done – what’s the good practical usage for it. And then from that what variables are required to make the end result work?

In the jsFiddle example I pass in the Text, font and font-size. But there are also some tweaking to be done to position the text optimally over the image – and this varies based on the font and the size. I used Fascinate because it was a “fat” font and therefore showed a lot of the background image……Probably the transparency of the “white” mask could be a variable as well.

I am thinking something like this


$('#image').stencil({
	text: 			"XOMINO",
	font-family: 	"fascinate",
	font-size: 		70,
	text-positionX:	10,
	text-positionY:	30,
	text-color:	"red",
	mask-opacity:	255
}

I have a lot of balls in the air what with MWLUG and a new job in the offing but I will come back to this and at least make a basic plugin for it….

So how would you use it?

Marky

HTML5 – Battery Status – in your XPage!

I saw this article yesterday and I wanted to test it in XPages – no issues – but it only works in the latest version of FIREFOX 13 – it is just amazing what your browser is going to be able to do in the (near) future.

http://www.smartjava.org/content/html5-access-battery-status-through-javascript

Demonstration in an XPage (Firefox 13 only)

http://demo.xomino.com/xomino/xPlay.nsf/xBattery.xsp

With the power plugged in

Battery Status through HTML5
Battery Status through HTML5

With the power plugged out

Battery Status through HTML5 (no power connected)
Battery Status through HTML5 (no power connected)

Not my work

I fully admit this is a complete rip-off and none of this code is my own – I just stuck it into an XPage to see if it would work

Pushing data to an XPage from the server – HTML5 eventSource

Introduction

We are going to look at the new HTML5 eventSource capability. Adapting the articles (posted here) and (posted here) I am goign to show you how to send data from the server to your XPage without using ajax to initiate the communication. I have the feeling there is a lot to learn in this area and we are just scratching the surface.

Browser Support

Yep – it is HTML5 which means no IE right now – Chrome should support this but my copy does not – so right now this demonstration is only tested and working in the latest version of FireFox.

Demonstration

The results of this article are demonstrated here, and I strongly suggest you use some kind of plugin to watch the traffic as the values chance – quite fascinating. Right click – View Source and see for yourself – no ajax! no jQuery, nothing fancy, just HTML5 in action!

http://demo.xomino.com/xomino/xPlay.nsf/xHTML5ServerSent.xsp

Server output

I have modified Stephan Wissel’s xAgent XSnippet to create a simple data stream using server-side output.¬†Calling this xAgent through the web generated the following simple data output as seen here through Firefox HTTPFox plugin.

The thing to highlight is the Content-Type text/event-stream

xAgent output
xAgent output
<?xml version="1.0" encoding="UTF-8"?>
<!-- XPage which is not rendered but returns data like XML, JSON, etc.     -->
<!-- More: http://www.wissel.net/blog/d6plinks/shwl-7mgfbn                 -->

<xp:view xmlns:xp="http://www.ibm.com/xsp/core" rendered="false">
  <xp:this.afterRenderResponse>
	<![CDATA[#{javascript:
		var externalContext = facesContext.getExternalContext();
		var writer = facesContext.getResponseWriter();
		var response = externalContext.getResponse();

		// set content type, e.g. ...
		response.setContentType("text/event-stream");

		response.setHeader("Cache-Control", "no-cache");

		// read parameters, e.g. ...
		var param = context.getUrlParameter("myParam");

		// write HTML output e.g. ...
		writer.write("data: the number is "+@Random());

		writer.endDocument();
	}]]>
  </xp:this.afterRenderResponse>
</xp:view>

HTML5 JavaScript

In our xPage we create some JavaScript to instantiate and then listen to the eventSource
First of all we test to see if the EventSource is supported in this browser

		if(typeof(EventSource)!=="undefined") {

		else {
			dojo.byId("#{id:serverData}").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
		}]]>

Using the following code we subscribe to the EventSource (xSendHTML5Data_1.xsp is the xPage described above)

			var eSource = new EventSource("xSendHTML5Data_1.xsp");

And then when we receive a message from the server we act on it

			eSource.onmessage = function(event) {
				//write the received data to the page
				dojo.byId("#{id:serverData}").innerHTML = event.data;
			};

This all comes together as the following ScriptBlock in the page

	<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[//check for browser support
		if(typeof(EventSource)!=="undefined") {
			//create an object, passing it the name and location of the server side script
			var eSource = new EventSource("xSendHTML5Data_1.xsp");
			//detect message receipt
			eSource.onmessage = function(event) {
				//write the received data to the page
				dojo.byId("#{id:serverData}").innerHTML = event.data;
			};
		}
		else {
			dojo.byId("#{id:serverData}").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
		}]]>
		</xp:this.value>
	</xp:scriptBlock>

Stopping the source

We are able to stop the source using eSource.close() that will stop the data being sent. I added mine in a button

	<xp:button id="button1" value="Stop the Source">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script><![CDATA[eSource.close()]]></xp:this.script>
		</xp:eventHandler></xp:button>

Changing the refresh time

We are able to change the refresh time by returning the retry value in millisecond along with our data

writer.write("retry: 2000\ndata: the number is "+@Random());
setting the refresh time 2000ms
setting the refresh time 2000ms

Specifying an event name

This mercilessly ripped directly from the article – I have not done anything with the event listeners yet, but here the next thing I want to look at….using the data returned from the server to trigger events in the browser without having to parse the return string and take action on it – that’s a huge performance gain and distributes the tasks….more to come on that in the near future….

For example, the following server output sends three types of events, a generic ‘message’ event, ‘userlogon’, and ‘update’ event:

data: {"msg": "First message"}\n\n
event: userlogon\n
data: {"username": "John123"}\n\n
event: update\n
data: {"username": "John123", "emotion": "happy"}\n\n
With event listeners setup on the client:

source.addEventListener('message', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.msg);
}, false);

source.addEventListener('userlogon', function(e) {
  var data = JSON.parse(e.data);
  console.log('User login:' + data.username);
}, false);

source.addEventListener('update', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.username + ' is now ' + data.emotion);
}, false);

Enjoy ūüôā

Demonstration

http://demo.xomino.com/xomino/xPlay.nsf/xHTML5ServerSent.xsp