JavaScript Patterns

Being a client side language usually heavily tied to the UI, JavaScript code sometimes suffers from a lack of core programming concepts that can make the code hard to reuse and maintain. Here are a few patterns that can help:

Prototype

Benefits include:

• Variables taken out of global namespace
• Methods loaded once into memory and reused by each instance
• Methods can be overridden by developers using your code

Module

Benefits include:

• Variables taken out of global namespace
• Public and private members

Cons:

• Methods get loaded into memory for each instance
• Not easy to override methods
• Debugging can be trickier as private members can be hidden

And the winner is… Revealing Prototype

Benefits include:

• Variables taken out of global namespace
• Public and private members
• Easy to override methods

Silverlight 5 RTM

It took a while but Silverlight 5 is finally here: http://www.silverlight.net/downloads

 

New features

Building next-generation business applications

· PivotViewer -- now included in SDK. Adds support for dynamic client-based collections, XAML-based visuals, and customizability.

· ClickCount: Add support for multi-click to your application

· Listbox/ComboBox type-ahead text searching: Listboxes and ComboBoxes can now scroll based on text input

· Ancestor RelativeSource Binding: Bind to a property on a parent control

· Implicit DataTemplates: Allow DataTemplates to be defined implicitly

· DataContextChanged event

· Added PropertyChanged to the UpdateSourceTrigger enum

· Save File and Open File Dialog: Specify a default filename when you launch your SaveFileDialog and specify a default directory when you launch your OpenFileDialog

· Databinding Debugging: Set a breakpoint directly in XAML, examine locals, and debug your bindings

· Custom Markup Extensions: Execute custom code at XAML parse time

· Binding on Style Setters: You can now specify a binding within a style

Improved Text support

· Text Tracking & Leading: Exercise fine-grained control over the spacing between characters and lines in your text

· Linked Text Containers: Create linked RichTextBlocks that allow text to flow seamlessly from one to the next

· OpenType and Pixel Snapped Text : Improved text clarity

· Postscript vector printing: reduces the size of print jobs and improves rendering quality of text

· Performance improvements for Block Layout Engine.

Silverlight 5 performance improvements

· Parser Performance Improvements: Improved XAML parse times for UserControls & ResourceDictionaries

· Network Latency Improvements: Significant performance improvement in ClientHttpWebRequest scenarios

· H/W accelerated rendering in IE9 windowless mode: Silverlight now uses the new SurfacePresenter APIs for H/W accelerated rendering in IE9 windowless mode

· Multicore JIT: Shortens the start-up time for Silverlight apps

· 64-bit browser support

 

Graphics improvements

· Improved Graphics stack: The graphics stack has been re-architected to add features such as Independent Animations

· 3D: Use the XNA API on the Windows platform to gain low-level access to the GPU and draw vertex shaders and low-level 3D primitives. Includes Render targets, XNA built-in effects, surface composition settings for depth/stencil buffers and multi-sample anti-aliasing

 

Silverlight 5 extends features of the "Trusted Application" model

Silverlight 5 extends features of the ‘Trusted Application’ model to the browser for the first time. These features, when enabled via a group policy registry key and an application certificate, mean users won’t need to leave the browser to perform complex tasks:

· Multiple window support: Launch multiple top-level windows inside a SL OOB application

· Full-Trust in-browser: Using Group Policy, deploy signed in-browser applications that harness the full power of full-trust functionality

· In-browser HTML support: Host your WebOC within an in-browser SL application

· Unrestricted File System Access: Read from and write to any directory on your system, from a full-trust application

· P/Invoke support : Allows existing native code to be run directly from Silverlight

 

Tools improvements

• Visual Studio Team Test support.

Improved media support

· Low Latency Audio Playback: Use the SoundEffect API to trigger low-latency sound

· Variable Speed Playback: allows video to be played at different speeds and supports fast-forward and rewind. At up to twice the speed, audio pitch correction allows users to watch videos while preserving a normal audio pitch.

· H/W Decode of H.264 media: Significant performance improvements with H.264 media decoding of unprotected content

· DRM Key Rotation/LiveTV Playback: Long-running live TV playback protected through the use of rotating licenses

· Application-Restricted Media: Prevents playback of protected content in unauthorized applications

Top 100 fonts

Based on a German website, these are the top 100 best fonts of all time.

Top 100 Best Fonts Of All Time

Below you will find the full list of the best 100 fonts along with the designer & the year in which they were designed.

1. Helvetica [1957 - Max Miedinger]

2. Garamond [1530 - Claude Garamond]

3. Frutiger [1977 - Adrian Frutiger]

4. Bodoni [1790 - Giambattista Bodoni]

5. Futura [1927 - Paul Renner]

6. Times [1931 - Stanley Morison]

7. Akzidenz Grotesk [1966 - G nter Gerhard Lange]

8. Officina [1990 - Erik Spiekermann]

9. Gill Sans [1930 - Eric Gill]

10. Univers [1954 - Adrian Frutiger]

11. Optima [1954 - Hermann Zapf]

12. Franklin Gothic [1903 - Morris Fuller Benton]

13. Bembo [1496 - Francesco Griffo]

14. Interstate [1993 - Tobias Frere-Jones]

15. Thesis [1994 - Lucas de Groot]

16. Rockwell [1934 - Frank H. Pierpont]

17. Walbaum [1800 - Justus Walbaum]

18. Meta [1991 - Erik Spiekermann]

19. Trinit [1982 - Bram De Does]

20. Din [1926 - Ludwig Goller]

21. Matrix [1986 - Zuzana Licko]

22. OCR [1965 - American Type Founders]

23. Avant Garde [1968 - Herb Lubalin]

24. Lucida [1985 - Chris Holmes / Charles Bigelow]

25. Sabon [1964 - Jan Tschichold]

26. Zapfino [1998 - Hermann Zapf]

27. Letter Gothic [1956 - Roger Roberson]

28. Stone [1987 - Summer Stone]

29. Arnhem [1998 - Fred Smeijers]

30. Minion [1990 - Robert Slimbach]

31. Myriad [1992 - Twombly & Slimbach]

32. Rotis [1988 - Olt Aicher]

33. Eurostile [1962 - Aldo Novarese]

34. Scala [1991 - Martin Majoor]

35. Syntax [1968 - Hans Eduard Meier]

36. Joanna [1930 - Eric Gill]

37. Fleishmann [1997 - Erhard Kaiser]

38. Palatino [1950 - Hermann Zapf]

39. Baskerville [1754 - John Baskerville]

40. Fedra [2002 - Peter Bil'ak]

41. Gotham [2000 - Tobias Frere-Jones]

42. Lexicon [1992 - Bram De Does]

43. Hands [1991 - Letterror]

44. Metro [1929 - W. A. Dwiggins]

45. Didot [1799 - Firmin Didot]

46. Formata [1984 - Bernd M llenst dt]

47. Caslon [1725 - William Caslon]

48. Cooper Black [1920 - Oswald B. Cooper]

49. Peignot [1937 - A. M. Cassandre]

50. Bell Gothic [1938 - Chauncey H. Griffith]

51. Antique Olive [1962 - Roger Excoffon]

52. Wilhelm Klngspor Gotisch [1926 - Rudolf Koch]

53. Info [1996 - Erik Spiekermann]

54. Dax [1995 - Hans Reichel]

55. Proforma [1988 - Petr van Blokland]

56. Today Sans [1988 - Volker K ster]

57. Prokyon [2002 - Erhard Kaiser]

58. Trade Gothic [1948 - Jackson Burke]

59. Swift [1987 - Gerald Unger]

60. Copperplate Gothic [1901 - Frederic W. Goudy]

61. Blur [1992 - Neville Brody]

62. Base [1995 - Zuzana Licko]

63. Bell Centennial [1978 - Matthew Carter]

64. News Gothic [1908 - Morris Fuller Benton]

65. Avenir [1988 - Adrian Frutiger]

66. Bernhard Modern [1937 - Lucian Bernhard]

67. Amplitude [2003 - Christian Schwartz]

68. Trixie [1991 - Erik van Blokland]

69. Quadraat [1992 - Fred Smeijers]

70. Neutraface [2002 - Christian Schwartz]

71. Nobel [1929 - Sjoerd de Roos]

72. Industria [1990 - Neville Brody]

73. Bickham Script [1997 - Richard Lipton]

74. Bank Gothic [1930 - Morris Fuller Benton]

75. Corporate ASE [1989 - Kurt Weidemann]

76. Fago [2000 - Ole Schafer]

77. Trajan [1989 - Carol Twombly]

78. Kabel [1927 - Rudolf Koch]

79. House Gothic 23 [1995 - Tal Leming]

80. Kosmik [1993 - Letterror]

81. Caecilia [1990 - Peter Matthias Noordzij]

82. Mrs Eaves [1996 - Zuzana Licko]

83. Corpid [1997 - Lucas de Groot]

84. Miller [1997 - Matthew Carter]

85. Souvenir [1914 - Morris Fuller Benton]

86. Instant Types [1992 - Just van Rossum]

87. Clarendon [1845 - Benjamin Fox]

88. Triplex [1989 - Zuzana Licko]

89. Benguiat [1989 - Ed Benguiat]

90. Zapf Renaissance [1984 - Hermann Zapf]

91. Filosofia [1996 - Zuzana Licko]

92. Chalet [1996 - House Industries]

93. Quay Sans [1990 - David Quay]

94. C zanne [1995 - Michael Want, James Grieshaber]

95. Reporter [1938 - Carlos Winkow]

96. Legacy [1992 - Ronald Arnholm]

97. Agenda [1993 - Greg Thompson]

98. Bello [2004 - Underware]

99. Dalliance [2000 - Frank Heine]

100. Mistral [1953 - Roger Excoffon]

dat.GUI: JavaScript variable editor

A lightweight graphical user interface for changing variables in JavaScript. 

Simply pass your variables into the dat.GUI framework and they’ll appear in an editable data grid in the top right hand corner.

A beautiful example here:  http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

My simple example:

Get the code here:  http://code.google.com/p/dat-gui/

C# Object Pooling

The following code was taken from the RedGate blog for GC memory management:

TPL DataFlow C#

The new DataFlow library can build up pipelines for our data to flow through.

Perhaps you have a series of processes a file must go through in a defined sequence:

1. Encrypt
2. Compress
3. FTP
4. Archive

DataFlow allows for easy manipulation of concurrency, asynchronicity and build up of our data flow pipelines.

In this simple example a number is posted into the pipeline, to be transformed by doubling it.  It can then be passed to the ActionBlock for output to screen.

You can download the TPL DataFlow CTP from Microsoft:
http://msdn.microsoft.com/en-us/devlabs/gg585582

Metro Futures

Configuring a Web Server to host Silverlight Apps

To configure your web server to host your silverlight application, you’ll need to add the following MIME types to your web server:

MIME type	Extension
application/xaml+xml	.xaml
application/x-silverlight-app	.xap

And to setup the server for WPF and ClickOnce applications:

MIME type	Extension
application/manifest	.manifest
application/x-ms-application	.application
application/x-ms-xbap	.xbap
application/octet-stream	.deploy
application/vnd.ms-xpsdocument	.xps

Agile Principles

Requirement Gathering

User Story

As a, I want, So that / Given, When, Then

Estimating Time

Story points

Not based on time but rather a number relative to previous size/complexity of an item.

Planning

SCRUM

Roles

Scrum Artifacts

Scrum Ceremonies

Activities

Tools

AgileZen

Grasshopper Project Management (if using Jira)

QUnit: TDD with JavaScript

QUnit is a TDD framework that allows developers to write unit tests against their JavaScript libraries and run them in the browser or against a CI server. 

For this blog article I’ll be showing you how to setup your dev machine to write and run the tests.

What shall we Unit Test today?

For this example I am going to create some unit tests around a popular jQuery pub/sub plugin, which is available here: https://github.com/phiggins42/bloody-jquery-plugins

The plugin API is very simple and allows the developer to: 

• subscribe to an topic
• unsubscribe from a topic
• publish a topic

My Folder and File Layout for QUnit

When you download the source code to my example you’ll see the following files:

core	Folder	Contains the two core libraries to run QUnit:  QUnit.js and QUnit.css (JQuery is also required, online file used)
source	Folder	Contains the JavaScript you will be testing
tests	Folder	The unit tests
TestRunner.html	Folder	Open in the browser to run the tests

This layout is purely my preference but helps me keep a nice structure to my tests and CI build.

The Test Runner

The Tests

The first couple of lines are just const variables for topics and can be ignored. 

module("Pub/Sub Tests"); gives the tests a grouping (see test output image at the top of the blog article.

test("test name”, function () { … }); is the unit test name and code.

expect(1); states the number of expected assertions within the test.  If this number is not realised the test will fail.

ok(error === null, 'No error occurred'); and equal(count, 2, 'callback was fired twice'); are examples of assertions.

Links

My example source code: http://stevenhollidge.com/blog-source-code/QUnit.zip

QUnit source: https://github.com/jquery/qunit

QUnit docs: http://docs.jquery.com/Qunit

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.

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/

jQuery Pub/Sub

Source Code

jQuery pub/sub plugin by Peter Higgins (dante@dojotoolkit.org)

Memcached C#

Memcached is a distributed object memory caching system, acting as an in-memory key-value store for small chunks of arbitrary data (strings, objects) from results of database calls, API calls, or page rendering.

Downloads

Client library source and demo for C#:  http://sourceforge.net/projects/memcacheddotnet/

Client library binary for C#:  http://stevenhollidge.com/blog-source-code/memcached-windows-client-binary.zip

Server runtime for Windows:  http://stevenhollidge.com/blog-source-code/memcached-windows-server.zip

How to start the Server

To run the server with 2 Gb of memory (2000Mb), copy the files from the above server download into C:\Program Files\memcached directory and execute the following command:

Simple client code example

Benchmark with simple example: key=“key:n”, value=”MyData”

Example benchmarks with 1 million sets and gets, the source code can be found within the client library download above: