Showing posts with label html5. Show all posts
Showing posts with label html5. Show all posts

Friday, 14 November 2014

ng-simple-rest-app

Here’s an example of a simple rest application, written to demonstrate simple techniques to get people started with Angular:

Source:  https://github.com/stevenh77/ng-simple-rest-app

Client features
- default page not being shown by the router
- automatic conversion of Json strings into JavaScript dates (generic/aop approach)
- date control bound to model object from a data service
- select control databound to model from a data service
- confirmation dialog
- rest service calls for get, post, put, delete
- bootstrap layout for form
- form validation
- app navigation from controller using location and window services
- logging abstraction
- promises for service calls including error handling
- generic application level error handling
- busy indicator
- unit tests with mocks and promises
- material design for form entry

Server features:
- simple rest endpoints
- compression
- request logging to console
- CORS enabled
- object retrieved from JS array based on key
- object removed from JS array based on key

Sunday, 26 October 2014

Intro.js

Here’s how to add an intro to your site:

1) Download intro.js from https://github.com/usablica/intro.js/tags (which also contains lots of example usages)

2) Add the bootstrap-responsive.min.css and introjs.css files to the head of your page (see lines 6 and 7)

3) Add data-step and data-intro attributes to the sections of your page where you want the introduction to display (see lines 11, 12 and 13)

4) Add a button or link which starts the intro (see line 14)

5) Add the intro.js file to the bottom of your page (see line 16)

 


Here is an example runs the intro only the first time a user visits your page


http://stevenhollidge.com/blog-source-code/introjs/index-with-cookie.html


Saturday, 10 May 2014

Angular Validation with ngMessage

Here is a screenshot of a business form I have written in Angular:

angularvalidation

For the live demo click here

For the source code click here

The validation is coded using the new ngMessage directive which displays the error messages should any be present.  Various rules are shown as an example: required, min/max length, regex and a faked database lookup.

ngMessages has only been introduced since AngularJS 1.3.0-beta.8

This example was originally based on a blog post by Year of Moo with a few of my own enhancements to match the behaviour of a previous form I had created.

I’ve customised the CSS to show the user what fields are required, along with what fields have been updated and are valid.  Each control only updates when the user leaves the control rather than on every keypress which is the default Angular behaviour. 

I also use ngCloak to ensure no output is displayed before Angular has compiled the page.

Tuesday, 1 April 2014

Firebase: Store and sync data in real time

Check out this scalable, easy to use, web data storage for real time apps.

Example:

Firebase along with loads of cool demo apps and quickstart tutorials can be found here:  http://firebase.com

There’s also a web UI from administering your web db.

Try this out for yourself by spinning up a couple of browsers:  http://stevenhollidge.com/blog-source-code/firebase/index.html

Bear in mind the data is shared so whatever you type will appear above, be nice :)

Source:

<html>
<head>
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
</head>
<body>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script>
var myDataRef = new Firebase('https://d5wez3l3q02.firebaseio-demo.com/');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
</body>
</html>

It’s written in Scala and they take care of the eventual consistency and scalability issues which leaves the developer to focus on the business problem.  There’s also lots of bindings available including Angular and Ember. 


Enjoy!

Sunday, 27 October 2013

Polymer: The future of HTML5

It seems in many ways HTML is moving closer and closer to XAML. 

Through the use of Web Components, Google have come up with a project that allows developers to write HTML web pages that make use of data binding through Node.bind(), custom controls using HTML Imports and modularity with the Shadow DOM - very very cool stuff! 

http://www.polymer-project.org/

https://github.com/polymer/polymer

Webcast introducing Polymer (from May 2013): 

Polymer webcast from Google

Architectual diagram:

platform.js is a poyfill to bring all modern browsers up to a base line allowing devs to be able to use polymer.js.

It is believed that over time the size of platform.js will reduce as browsers catch up.  That said it’s still only 32KB when gzipped.

The team have created a set of controls/elements for app development, built on top of the framework such as:

image

Everything is an element.  The composability of business applications will lead to much faster development time, enabling programmers to focus on solving business problems and not battling away with boilerplate code.

The future looks incredibly fun for developers.

Saturday, 6 July 2013

C# client for Server Side Events (EventSource)

Examples of one way streaming from server to client can be found on the web but it’s pretty much always JavaScript clients.  Here is a working example using the .NET stack, with WebAPI as the server and a C# console application as the client.

Download and run this WebAPI chat application which emits Server Side Events:

https://github.com/filipw/html5-push-asp.net-web-api/

I then open Visual Studio running as admin, update the code to use IIS with my machine name (Zeus) and a virtual directory, clicking the create virtual directory button, so I can track requests using Fiddler:

image

Then update the JavaScript within the app to use the same path:

image

The create a Console application, using NUGET add Json.NET and paste this code in:

using System;
using System.IO;
using System.Net;
using System.Text;
using Newtonsoft.Json;

namespace ConsoleApplication2
{
class Program
{
static void Main(string[] args)
{
new WebClientWrapper();
Console.ReadKey();
}
}

public class WebClientWrapper
{
WebClient wc { get; set; }

public WebClientWrapper()
{
InitialiseWebClient();
}

// When SSE (Server side event) occurs this fires
private void OnOpenReadCompleted(object sender, OpenReadCompletedEventArgs args)
{
using (var streamReader = new StreamReader(args.Result, Encoding.UTF8))
{
var cometPayload = streamReader.ReadLine();
var jsonPayload = cometPayload.Substring(5);
var message = JsonConvert.DeserializeObject<Message>(jsonPayload);
Console.WriteLine("Message received: {0} {1} {2}", message.dt, message.username, message.text);
InitialiseWebClient();
}
}

private void InitialiseWebClient()
{
wc = new WebClient();
wc.OpenReadAsync(new Uri("http://zeus/chatapp/api/chat/"));
wc.OpenReadCompleted += OnOpenReadCompleted;
}
}

public class Message
{
public string username { get; set; }
public string text { get; set; }
public string dt { get; set; }
}
}


You’ll need to update the code for your machine name.


Now run Fiddler, the WebAPI project and the console app and add a message in the chat window:


image


In Fiddler, select the request your console just made and select Raw, you’ll see nothing.  Now right click and select COMETPeek and you’ll see the payload that was streamed.


image

Sunday, 10 March 2013

Sunday, 24 February 2013

KendoUI: Example using remote Rest calls

This quick example is best viewed in Chrome as I’m not testing in other browsers.

The Underlyings combo is populated from a NetFlix web rest service call which do films hence the content Smile

Here's the direct link:  http://stevenhollidge.com/blog-source-code/kendoui/index.html

Wednesday, 19 October 2011

HTML5 Server Side Events

Overview

Server-Sent Events (SSE) is a standard describing how servers can initiate data transmission towards clients once an initial client connection has been established.

It is commonly used to send message updates or continuous data streams to a browser client and designed to enhance native, cross-browser streaming through a JavaScript API called EventSource, through which a client requests a particular URL in order to receive an event stream.

This means the client can receive a one way fire hose of data from the server for such scenarios as new FX rates, stock prices, new message received, etc.

But I thought we had Web Sockets for this?  Yes, HTML5 does provide Web Sockets but that is for full duplex (bi-directional) data transfer whereas SSE can be used for one way communication from server to client.

image

In our simple example

  • The client automatically registers for Server Sent Events, setting Id to the current time (in JavaScript)
  • Every 5 seconds the server pushes event data to the client
  • The data, made up of three parts Id, Detail and Timestamp is displayed on the page.
  • A message counter is incremented for each message received.
  • The Server terminates the connection after 10 seconds (after 3 messages)
  • The cycle starts with the client registering for events.

 

Points of Interest

Notice how in the screenshot only two HTTP GETs were sent from the client to the server data URI (stream.php), one for each connection that was made.  The connection is kept open whilst the 3 events/messages are pushed the client.

Data format

In our example we are using JSON data format within the Event-Stream data format. We also need to set the Content Type of the event to “text/event-stream”.

To be able to set the HTTP header content type, we’ll be using a simple php script:

HTML Source

You can view the page online:  http://stevenhollidge.com/html5demos/server-sent-events/

Saturday, 15 October 2011

HTML5 Notifications

You can now send simple or HTML notifications to the users of your website from JavaScript. 

Here’s what the simple notification looks like with an icon included:

image

Here's the syntax, note you have to check the user has granted permission:

The image below shows a user receiving both a simple plain text (without an icon) and an HTML notification “pop up”:

image 

HTML Code

JavaScript Code

You can run the sample here:  http://stevenhollidge.com/html5demos/notifications

Or view all the HTML5Rocks demos here:  http://playground.html5rocks.com

HTML5 LocalStorage

It's very easy to store key value pairs in the local browser storage from JavaScript using the new HTML5 functionality:

This demo taken from the HTML5 website and also shows a javascript function firing on a timer using the setInterval() function which executes every 5 seconds.

image

You can run the demo live here:  http://stevenhollidge.com/html5demos/localstorage

You can run all the HTML5Rocks demos online here:  http://playground.html5rocks.com

Thursday, 13 October 2011

HTML5 IndexedDB

With the present inconsistent state of HTML5 across browsers, this example is best viewed in using Google’s Chrome browser.

I’ve been playing around with the IndexedDB object storage in HTML5.

Here we have a simple form to enter data into our IndexedDB. 

As an aside, the form also uses the HTML5 “required” attributes, with CSS to display a red star when an input field is invalid and green thumbs up when valid.

ScreenShot023ScreenShot024

Here’s a link to the online example: http://stevenhollidge.com/html5demos/indexeddb

The HTML and CSS are pretty basic, all the magic happens within the JavaScript.

HTML code

JavaScript Code

Saturday, 1 October 2011

HTML5 Web Worker

Web workers make it easy to make a process run on a background thread off the UI thread.

This simple example asks a worker thread to return a random number.

Screenshot

You can try it for yourself here:

http://stevenhollidge.com/html5demos/webworkers/index.html

Here’s the code:

index.html

worker.js

Source code can be downloaded here:

http://stevenhollidge.com/blog-source-code/WebWorkerDemo.zip