Knowledge: Tech Blog

Where we share our thoughts on technology and design.

Web

Nick Owen

Creating semantic components in Angular and React

Using two of the currently most popular web frameworks I'll demonstrate how to create semantic looking code.

Nick Owen

White-labelling using PostCSS path resolution

Theming an application is a concern for many organisations and products. In this post I'll present a simple way to manage branding using current tooling.

Colin Eberhardt

Interactive and Responsive Small Multiples with D3

Small multiples repeat the same basic chart, typically with the same axes, to display different slices of a dataset. They are an excellent way of showing rich multi-dimensional data, without becoming a dense mess of lines. This post looks at how to implement small multiples with D3 and d3fc.

Marzio Superina

React time travel: the store may not be enough

Your store is the source of truth... as long as it makes sense. A concrete example integrating Redux with React Router

Colin Eberhardt

Visualising London Marathon Training Data From Strava

I downloaded an analysed the training data for 1,000 athlete who ran the London Marathon in 2016. From this data I've learnt that people put in ~30% less mileage than popular plans suggest, Sunday mornings are a firm favourite for long runs, and that Saturday morning parkruns are very popular!

Marzio Superina

Level-up your dependencies in React

Level-up the state is perhaps the most useful React pattern. Apply it to your dependencies and you can get many benefits, like better tests, flow control and idempotent routes.

Rosie Hamilton

Creating My First Web Application with Go

How I used Go to create a web app that would help me practice violin scales.

Colin Eberhardt

Visualising London Marathon Strava Data

I recently downloaded run data for the 7,190 athletes who recorded their London Marathon on Strava, a popular platform for runners and cyclists. This blog post visualises and analyses the data in various interesting ways.

Chris Price

Efficient SVG layout with d3

When creating d3 visualisations it's common to want some form of responsive layout. However, SVG and canvas don't provide a native way to do this. Most examples found online either use fixed dimensions or resort to some form of manual layout to achieve the required effect. This post introduces an alternative approach using CSS and custom elements.

Darren Smith

Consumer Driven Contracts using Pact

In this post I will talk about Consumer Driven Contracts in Microservices architectures. I will also give an example of how to use Pact in a modern JavaScript application.

Bartosz Jedrzejewski

Spring Boot and MongoDB - a perfect match!

The popularity of Spring Boot in the Java world is undeniable. In this post I will show you yet another reason for this. Using Spring Boot makes working with MongoDB an absolute pleasure.

Jon Harris

Why does no one agree on a definition of MVC?

If you look up the MVC pattern on the web you can easily find definitions that differ and contradict each other. In this post I'll look at some definitions of MVC and consider what the differences mean for applying the pattern in practice.

Nick Soper

Hosting .NET Core on Linux with Docker - A Noob's guide

This blog describes my experience of upgrading a basic RESTful API from .NET Core RC1 to .NET Core 1.0, and using Docker to host it on Linux. Docker is completely new to me so I'll give my thoughts as a noob.

Drew Miley

Reading the Riot Act: Exploring a Lightweight React Alternative

Migrating a Knockout project to a webpack redux application using Riot, and why I didn't use React.

Chris Price

Using d3-force to control a massive tiny display

This post describes my entry into one of the hack events at JSConf.IS which challenged us to take control of the Northern Lights. It hopefully also serves as a nice introduction to creating visualisations with d3-force.

Chris Price

Highlights from JSConf.IS

My highlights from the inaugural JSConf.IS 2016 hosted at Harpa, Reykjavik.

Chris Price

Building Components with D3 Data Join

This post quickly introduces data join before moving on to some of the edge cases we've run into when building components on top of data join. It covers how you can solve them with vanilla D3 and why you might find our d3fc-data-join component useful.

William Ferguson

Web Audio API Part 2: Moving to Electron

Back in January, I blogged about using the Web Audio API with D3, creating an app using Knockout and RequireJS. I’ve since expanded on that application, migrating it to Electron and adding new functionality along the way – like MP3 tag extraction and recursive folder searching. Migrating to Electron In...

Chris Price

ES6 Iterators, RxJS, IxJS and the Async Iterators proposal

A quick walk through ES6 iterators and iterables. It covers extending d3fc’s random data component to implement the required protocols and how this can lead to greater interoperability with utility libraries like RxJS/IxJS. The d3fc-random-data stochastic generator d3fc contains a component for generating random data series based on stochastic processes....

Colin Eberhardt

Recursive Pattern Matching and Transformation of JavaScript AST

I’ve recently been playing around with the JavaScript Abstract Syntax Trees (AST), with the aim of transforming some JavaScript code into various other languages (Java, C#, Objective-C). As part of my research, I looked at how Babel performs AST transforms. If you’re not familiar with Babel, and the plugins which...

Bartosz Jedrzejewski

Code reuse in microservices architecture - with Spring Boot

In most microservice architectures, there are many opportunities and temptations for sharing code. In this post I will give advice based on my experience on when it should be avoided and when code reuse is acceptable. The points will be illustrated with the help of an example Spring Boot project.

Colin Eberhardt

Six tips for cleaner javascript promises

This blog post shares a few quick tips and patterns that I've been using to structure JavaScript promises; keeping them clean, simple and readable.

Dean Kerr

An update on Electron Security

It’s been a couple of months since my first post about the security of Electron. With v1.0 having recently been released I felt it was time for a a fresh look

Colin Eberhardt

Applying redux reducers to arrays

The redux pattern provides a simple (and strict) pattern for managing state; a single store holds the state while a reducer applies actions, evolving the application state. As your app becomes more complex, you can split up your reducer into separate functions, however, what if you have multiple instances of...

Robin Sillem

Securing Web Applications, Part 4. Account and Session Management Features

In this post, we discuss design and implementation choices for account and session management features, and how these trade off against usability and other goals.

Chris Price

Mondo Bank webhook to Pebble Watch Timeline using AWS Lambda functions

Inspired by Colin’s article on building an expenses app with the Mondo API, I wanted to create something to make use of the webhook API which fires in real-time (ish) whenever a transaction happens. In this post I’ll cover subscribing to the Mondo webhook, creating the glue code as an...

Michael Tinning

A Functional Front-End with React

This post uses React to show how we can use features from functional programming in everyday JavaScript, and integrates RxJS to show how these approaches are common across many frameworks today.

Colin Eberhardt

Automating Expenses With the Mondo API

Mondo Bank has recently moved into public Beta, sending out 1,000 cards to trial customers each week. I received my Beta card a few days ago, and have been using it ever since. This blog post takes a quick look at the Mondo API and how I used it to automate expense claims!

Ali Sheehan-Dare

D3FC ❤ Canvas

Along with the modularisation of code, D3 version 4 also brings new support for canvas drawing, thanks to the d3-path package introduced in version 4. There are performance advantages to using canvas over svg for drawing complex charts (however canvas is not necessarily always better). You can read more about...

Chris Price

d3-path - what is it good for?

This post introduces a new feature of D3 version 4: the d3-path package. d3-path is an abstraction over SVG path creation which uses the canvas element’s Context2D interface. Previously creating path generation code involved a lot of concatenating SVG path commands like M0,0 or L2,2, and the somewhat more cryptic...

Dean Kerr

As It Stands - Electron Security

A brief look at the current state of application security in Electron

Chris Price

Deconstructing a tweet-sized D3 creation

I recently created a site which I’m proud to say now hosts an impressive collection of tweet-sized D3 creations from the hugely creative people of the internet. In this post I’ll talk through deconstructing one or two of those creations with the aim of giving any aspiring artists a starting...

Robin Sillem

Securing Web Applications, Part 3. Cross Site Scripting Attacks

In this post, we discuss cross site scripting attacks against web apps, and how to defend against them.

Ali Sheehan-Dare

D3v4 is on the way!

The next version of D3, the data visualisation library, is on the way. As we maintain D3FC (a charting library built on top of D3) we want to stay on top of those changes, to make sure that the library makes appropriate use of any new functionality and to embrace...

Tim Barclay

Static Shock - Using Modern Static Site Generators

This post discusses building a modern single page marketing site using a static site generator

Robin Sillem

Securing Web Applications, Part 2. SQL (and other) Injection Attacks

In this post, we discuss SQL and other injection attacks against web apps, and how to defend against them.

Ali Sheehan-Dare

A Lazy Isomorphic React Experiment

If you've used React and Flux, you'll know how powerful this combination is when building single page applications. But how practical is it when building truly large scale applications with multiple sections?.

Robin Sillem

Securing Web Applications Against Man In The Middle Attacks

In this post, the causes, effects and mitigations of Man in the Middle attacks against web apps are discussed.

Chris Price

A Case for Hot-Reloading

Hot-reloading UI is a hot topic at the moment. I want to take some time to explain why, in the class of applications I typically work on, I believe it to be such an important feature for future UI frameworks to have. Fundamentally it’s about improving the developer workflow, improving...

Colin Eberhardt

Angular 2 Time Travel with Redux

This post looks at integrating Angular 2 with Immutable.js and Redux, a popular Flux store implementation. It also demonstrates that the functional approach, encouraged by these technologies, allow for powerful concepts such as time travel, where you can replay actions and application state.

Nick Soper

ASP.NET 5 to ASP.NET Core 1.0

Literally a couple of hours after we released the previous post on writing a RESTful API with ASP.NET 5, I learned that Microsoft have renamed the new platform. This is a very short summary of that decision.

Nick Soper

Building a RESTful API with ASP.NET 5

This blog describes my first experience of writing a RESTful API with Microsoft's new MVC 6 framework which is due to be released as part of ASP.NET 5 in early 2016.

William Ferguson

Exploring the Web Audio API with D3

In this post, I investigate the HTML5 Web Audio API, using it with D3 to perform real-time audio visualisation.

Bartosz Jedrzejewski

Java Microservices - How to get started in minutes using Dropwizard

This blog shows how to get started with microservices using Dropwizard. It guides the reader through building a simple task-list service.

Colin Eberhardt

Angular 2 with Immutable.JS

Angular 2.0 introduces a component-based approach to building applications, where the rendering can be optimised by selecting a suitable change detection strategy for each component. This post looks at how the OnPush change detection strategy works quite elegantly with the concept of immutable objects as enforced by Immutable.js.

Colin Eberhardt

Creating an Angular 2 build with Gulp, TSLint and DefinitelyTyped

From my perspective Angular 2 is a great improvement over Angular 1. The framework is simpler, and as a result your code is more concise, making use of modern JavaScript concepts. However, this does come at a cost; with Angular 2 the required tooling is really quite complicated.

Colin Eberhardt

Building a todo list application with Angular 2.0

This blog post takes a step-by-step approach to building a simple todo-list application with Angular 2.0. Along the way we'll look at web components, dependency injection, TypeScript, bindings and the Angular 2.0 change detection strategy which combine to make a much more elegant framework to its predecessor.

Bogdan Dimitrov

OAuth2 with SAML2.0 Authentication

There aren't many examples of OAuth2 working with a SAML 2.0 as an authentication method on the Internet. The purpose of this post is to provide a simple implementation of these two technologies working together.

Colin Eberhardt

Rendering ASCII Charts with D3

A few days ago Bloomberg published their list of 50 companies to watch in 2016, and for some reason they decided to publish the entire report in ASCII! I thought it would be a bit of fun to see if I could use D3 to create my own ASCI charts

William Ferguson

Sampling Large Datasets in d3fc

Libraries like d3 and d3fc do a fantastic job at making interactive charts. However, when the data size is in the hundreds of thousands, performance suffers. In this post, I'll have a look at some sampling techniques recently implemented in d3fc, and show them off with a demo.

Ian Sullivan

Creating a High Performance Stock Ticker Using Haskell

This post demonstrates how to create an efficient stock ticker app using HTML5 WebSockets and a Haskell server.

Chris Price

Improving D3 Performance by Embracing the Flux

While d3fc (a toolkit of charting components built in the d3 style) embraces the philosophy of simplicity over performance, there’s no point in creating a chart with lousy performance. In this post I’ll run through some of the tips and tricks for squeezing the best performance out of d3fc without...

Colin Eberhardt

Improving Grunt Performance

JavaScript builds are getting more complex and time consuming. This blog post shares a few steps I took to improve the performance of one of our project's grunt build, hopefully some of the tools I used will be of use to others.

Tim Barclay

Building a Jump Scroll Marketing Page with Meteor and OrionJS

Recently I needed to make a site for a personal project, and although I work on dynamic web apps for a living, I hadn't had to make a proper, honest-to-goodness website for years. There are plenty of well-known options out there for making sites quickly, like Wordpress and Squarespace, but why go for the quick option, I said to myself, when there's a learning opportunity to be had!

Nicholas Wolverson

Building D3-inspired charts with React

A foray into generating simple charts in a fashion inspired by D3 using React as a rendering engine.

Chris Price

An Adventure in SVG Filter Land

I’ve been working on an open-source charting library called d3fc. And following Colin’s lead, was looking for a creative example to replicate: I think I found it… Once upon a time The story starts with Coinbase, a well-known(/funded) Bitcoin company. I was hunting for a freely available streaming data feed...

Ian Sullivan

What Makes a Good CMS?

Code quality is important in large systems and web sites are no exception. This post shows how Umbraco enables developers to write clean and maintainable code.

Colin Eberhardt

Creating a Yahoo Finance chart with D3 and d3fc - Part Two

Most charting libraries are monoliths. The more features they support, the more unwieldy their APIs tend to become. With the d3fc project we have been exploring an alternative approach, constructing charts from a set of small components, using the D3 library.

Tim Barclay

Creating a Single Page App in Meteor

Meteor seems like a fresh way to work. It makes a lot of things, like CRUD operations and keeping your UI in line with data changes, extremely easy and it adds a lot of nice, clever tricks, like the client-side stubbing of server-side methods.

Robat Williams

Applying styles to parent elements before children in AngularJS

Sizing advanced components such as grids using ng-style can leave you with rendering problems. Here, I create a variant of ng-style with some small tweaks to avoid this problem.

Colin Eberhardt

Creating a Yahoo Finance chart with D3 and d3fc

Most charting libraries are monoliths. The more features they support, the more unwieldy their APIs tend to become. With the d3fc project we have been exploring an alternative approach, constructing charts from a set of small components, using the D3 library.

Luke Page

Aurelia, less2css and bundling

In the second post of my series on the Aurelia framework I walkthrough bundling the less2css project. The result of which significantly reduced the load time, but did uncover a few aspects of the Aurelia bundling process that do not yet feel fully formed.

Luke Page

Creating less2css using Aurelia

This post gives a walkthrough of a project that makes use of the new Aurelia framework. It also take a look at how it compares to Angular 2.0, which is still in development.

Luke Page

State of localisation on the web

Localising a web application to a high standard is difficult. Why is that? Consider the following differently formatted numbers… -1,23,45,678.99 12.345.678,99- (12 345 678.99) ١٢,٣٤٥,٦٧٨.٩٩ There are several differences between them: The location and type of the negative sign - it can be brackets (though of the standard windows locales,...

Luke Page

Making a RTL plugin in less

I mentioned in the previous post that I would create a plugin for less which converted from LTR to RTL. Here is a tutorial post on creating that plugin. Setting the project up I know we want to modify the AST (abstract syntax tree), so we will need a visitor...

Luke Page

RTL Support in Web Applications

Some languages of the world (Arabic, Hebrew etc.) are RTL, meaning they are read right-to-left, instead of left-to-right. Typically in web applications supporting one of these languages, everything is reversed, meaning scroll bars, progress indicators, buttons etc. I recently took part in a discussion with the jQuery UI team about...

Colin Eberhardt

SVG layout with Flexbox for simpler D3 charts

This blog looks at how CSS flexbox layout can be applied to SVG in order to simplify the task of constructing charts with D3. This approach has been made possible by the JavaScript flexbox implementation that Facebook recently open sourced to support ReactJS Native.

Andy Lee

Hero transitions in AngularJS

How to create hero transitions with AngularJS, similar to those implemented by Google's Material Design and Polymer's core-animated-pages.

Sean O'Neill

Introducing the MEAN stack

Taking a look at a new fullstack Javascript web application framework.

Mark Jose

An RSI component for D3 charts

An RSI (Relative Strength Index) D3 component which can be added to a D3 chart. In the blog I've also tried to explain a little bit about RSI and it's uses in calculating risk when trading markets.

William Reilly

HTTP/2: A quick look

With the HTTP/2 specification just going to Working Group Last Call and due for publication in early 2015, I thought now would be a good time to have a quick look at what's changing.

Andy Aiken

A Fibonacci fan component for D3

In this article I'm going to create an interactive Fibonacci fan D3 component, and show you how to add it to a chart in just 6 lines of code.

Andy Aiken

An interactive crosshairs component for D3

In my last article I put together an interactive chart that could be panned and zoomed, but there was one obvious omission - crosshairs. In this article I'm going to create a D3 crosshairs component, and show you how to add it to a chart.

Tom Simmons

An interactive Stock Comparison Chart with D3

Comparison charts, as their name suggests, are great for comparing the percentage price change of multiple stocks in time. In this post, we'll make one using D3.

Andy Aiken

Creating an interactive chart with D3

Recently I've been looking at various D3 components, which has been a fun project. I haven't yet had the chance to develop an interactive, dynamic component though, which has meant that the resulting charts have been sadly static. For this article I wanted to use what I've learned to build a fully interactive chart - something that wouldn't look out of place on a financial app.

Tom Simmons

D3 SVG chart performance

In this post, we'll take a look at some of the performance issues you might encounter when making interactive charts using SVG, and how you might go about fixing them.

Ian Sullivan

Writing Desktop and Web-Based JavaScript Applications

This post demonstrates how JavaScript and HTML5 related technologies can be used to create an application that can run in both a web browser and as a cross-platform desktop application using node-webkit.

Andy Aiken

A Bollinger Bands Component for D3 Charts

In my last article (on line annotation components for D3 charts), I created a D3 component which calculated and displayed a moving average. As promised, I'm now turning my attention to Bollinger Bands.

Andy Aiken

Two Reusable Line Components for D3 Charts

In this article I'm going to create two simple, reusable D3 components for adding line annotations to charts.

Tom Simmons

An OHLC Chart Component for D3

An open-high-low-close chart is a type of financial chart used to show price movements in a financial instrument over time. In this post, we'll make a reusable D3 component for an OHLC chart series.

Dan Gorst

Functional Reactive Programming with Bacon.js and D3

Reactive programming is a paradigm which allows you to better represent a work flow where changes in one part of your data model propagate down to other parts of the model. This blog post demonstrates an example of this, by listening for updates to Wikipedia and reacting accordingly.

Robat Williams

Developing large scale KnockoutJS applications

It's easy to get started building data-bound user interfaces in the browser using the KnockoutJS MVVM library. This post covers some practices and techniques that help with using it successfully in large single page applications.

Luke Page

Extends in less

For a long time now, extends in less have been bubbling away. When I joined the less team in September last year it was one of the highest asked for feature requests. We decided that 1.3.x releases would fix bugs and implement minor feature requests and that 1.4.0 would include...

Luke Page

Less vs Sass vs Stylus

First off, this is a biased blog post as I am heavily involved in less.js at the moment. I have been inspired to write this because of the popular sass vs less post and because although it is very accurate (at the time it was written) it doesn't really cover...

Luke Page

Headless testing in less.js with PhantomJS

Introduction Less.js can be run in two ways, firstly through node and secondly in the browser. A great deal of the code is shared, but not all of it - particularly the way it deals with imports, paths and url's differs. Whilst typing "make test" in the node less.js repository...

Luke Page

The world of LESS

Luke Page, one of the project leads, gives an introduction to less.

Mark Rhodes

Picker Style Number Animation with jQuery and CSS3

This post describes a jQuery plugin which performs "picker style" animations between numbers using CSS3 transitions and transforms. The plugin was originally designed with iOS Safari in mind but works on the latest versions of Opera, Chrome and Firefox too (it should work on IE10 too but I've been unable...

Chris Grant

Creating a Telemetry Application using Silverlight, Visiblox and Custom Controls

Introduction About a month ago, I was using the MoTeC i2 Data Analysis software to look through some telemetry data that I had exported from a popular racing simulator game. Although MoTeC is feature rich and a great tool for motor racing professionals and enthusiasts, I had the idea to...

Andrew Aylett

Building Web-Services Using Guice

I've recently had the opportunity to investigate building web services using Java. I think it's fair to say that Spring is the most commonly used dependency injection framework for Java, and it comes with a lot of other useful tools too, but I have no experience using it so I...

Nicholas Wolverson

Mapping in WPF, Silverlight and WP7

In this article I show a simple example of integrating Bing and Google mapping into in WPF, Silverlight, and Windows Phone applications. I was inspired to investigate how easy it is to get up and running with maps on these platforms when I saw how similar the Bing APIs are...

Colin Eberhardt

Introducing the jQuery Mobile Metro Theme

This blog post introduces the new jQuery Mobile Metro theme and demonstrates how to create a web UI that detects the device it is being viewed on, to render a Metro UI on WP7 and iOS on other devices

Colin Eberhardt

Everything you wanted to know about databinding in WPF, Silverlight and WP7 (Part Two)

Introduction This is the second post in my series about databinding in Silverlight and WPF. In the first post I looked at how you wire-up UI controls to a model in the absence of a databinding framework. I showed how databindings can be created in code-behind, removing the need for...

Chris Price

Moving to the Web 2: Dark Territory

This series of posts (part 1) are attempting to do the impossible, to try and give desktop developers a brief introduction to developing on the web. I say impossible because the web is such a vast topic. On one side sits stacks of bizarre and nuanced APIs, but on the...

Colin Eberhardt

KnockoutJS vs. Silverlight - a new CodeProject article

I have just published a new article over on CodeProject called "KnockoutJS vs. Silverlight". It demonstrates the implementation of the same application using both frameworks, and seeks to answer the question "Which is better, Silverlight or Knockout?" It's a bit of an epic (6,500 words). I hope people find it...

Colin Eberhardt

Everything you wanted to know about databinding in WPF, Silverlight and WP7 (Part One)

OK, so the title is a little ambitious, but there is nothing wrong with setting yourself lofty aims! Because of the depth of this topic I have decided to split this tutorial up into a series of blog posts, each of which explore a different aspect of the binding framework....

Chris Price

Explodz - A Webkit DOM Visualizer

A little while ago Colin showed me a tool for inspecting the visual tree of a Silverlight/WPF application (Snoop thanks Colin!). The bit I remember was a 3D view of the app, where an element's on-screen depth represented it's depth in the visual tree. I thought it could make a...

Colin Eberhardt

Plotting Circular Relationships Graphs with Silverlight

I have just published a new article on codeproject, which describes the creation of a Silverlight custom control for plotting the relationships between a network of nodes. Head over to codeproject and take a look! Visualisation of Eurozone Debt You can see the control in action below, where it is...

Chris Price

Moving to the Web

This post is an attempt to do the impossible, to try and give desktop developers a brief introduction to developing on the web. I say impossible because the web is such a vast topic. On one side sits stacks of bizarre and nuanced APIs, but on the other mountains of...

Colin Eberhardt

Visualising StackOverflow Tag Relationships with Silverlight

UPDATE: I have posted the sourcecode for this control on codeproject. Recently I have been wondering about the wealth of information that can be gleaned from the 2.5 million programming question on Stack Overflow. A few weeks back I found a tag trending tool, which can be used to measure...

Colin Eberhardt

The Gradual Decline in Silverlight Adoption

Around one year ago I made the prediction that Silverlight would have an overall adoption of 81% by the end of 2011. The adoption statistics are now available and indicate that my predictions were wrong by more than 10%, with Silverlight adoption reaching just 67% at the start of this...

Colin Eberhardt

A Simple Pattern for Creating Re-useable UserControls in WPF / Silverlight

This blog post provides step-by-step instructions for creating a user control, which exposes bindable properties, in WPF and Silverlight. The post covers dependency properties, and how to manage DataContext inheritance. When building user interfaces you will often find yourself repeating the same UI patterns across your application. After all, users...

Graham Odds

Change is afoot in the lands of Flash and Flex

Adobe has recently made a number of rather muddled announcements around Flash and Flex that have caused confusion and concern in the development community. In this post I hope to clarify what actually has been said and present my take on what it might actually mean for those of us...

Colin Eberhardt

Tombstoning with PhoneGap for Windows Phone 7 (and KnockoutJS)

A few weeks back I wrote a blog post about how the recent announcement of PhoneGap support for Windows Phone 7 (WP7) which makes it possible to develop HTML5-based applications. In my previous blog post I showed the development of a simple HTML5 / JavaScript application which PhoneGap wraps up...

Colin Eberhardt

Adding Error Bars to Visiblox Silverlight Charts

Having spent a number of years studying Physics at university, I have had the importance of error bars well and truly drummed into me! Within physics, or any experimental science, there are always going to be errors in the measurements you make. The more repeat measurements you make, the more...

Colin Eberhardt

Paging Data from the Server with Silverlight

This blog post provides an implementation of IPagedCollectionView which allows paging of data from the server. An IPagedDataSource is introduced that allows any paged data source to be plugged in, with the standard controls such as DataPager making it easy to create paging applications. With web-based applications, bandwidth constraints often...

Colin Eberhardt

XAML Finance - a cross-platform WPF, Silverlight, WP7 application

I have just published a new article on codeproject which describes the development of XAMLFinance, a cross-platform application for the desktop (WPF), web (Silverlight) and phone (WP7). Head over to codeproject to read about the development of this application and download the sourcecode. Regards, Colin E.

Colin Eberhardt

TweetSearch - A Cross platform Metro UI WinRT and Silverlight Application

With the Windows 8 preview release earlier this week, developers are now faced with a whole new and exciting Microsoft stack. The Windows 8 architecture has something of a split-personality, incorporating a completely new runtime, WinRT together with the older Win32 and .NET framework. However, these sit on different sides...

Chris Price

Dart - a few wildly speculative thoughts

Colin's post on Dart and the other fallout from Google's announcement across the web sparked a few thoughts in my mind, so I thought I'd share them. Firstly I think it's important to point out how much of what is currently being said is speculative. Most people's opinions on Dart...

Colin Eberhardt

Dart - will Google make HTML5 applications viable?

Just a few weeks ago I wrote a blogpost "Can Microsoft 'fix' JavaScript and make HTML5 applications viable?", where I described some of the issues with JavaScript and how these could be solved by Microsoft if they wrote a C# to JavaScript compiler. Just a couple of days ago it...

Graham Odds

Static Initialisation in Flex

For reasons best ignored I recently investigated the different ways in which static initialisation code can be run in Flex. As well as a direct equivalent to the static initialiser blocks available in Java and C#, Flex has a couple of subtle variants that can prove useful in different circumstances....

Colin Eberhardt

From Silverlight to HTML5 CodeProject Article

I have just published an article on codeproject which describes the differences in development between Silverlight and HTML5. In order to illustrate the differences, I have re-implemented my Windows Phone 7 JumpList control using HTML5/CSS3. You can see this control in action below: (NOTE: this will look best in a...

Colin Eberhardt

Silverlight UK User Group Presentation on Cross Platform XAML

Earlier this week I presented a talk to the Silverlight UK User Group on cross-platform application development with WPF, Silverlight and Windows Phone 7. Thanks to Gergley Orosz for these pictures Thanks to all who attended my talk. Here is a copy of the presentation I gave: You can see...

Jonathan Cardy

Undocumented changes to jQuery "andSelf"

OK, this is a little behind the times since I'm talking about jQuery 1.3.2 - but it may be useful to someone. Today I was working on a project which had some time ago been upgraded from jQuery 1.3.2 to the latest version, and shortly after, a bug was raised....

Jonathan Cardy

Converting between jQuery Deferred and Rx Observable

In this post I am going to look at the similarities between jQuery Deferred and Microsoft Reactive Extensions, and supply code which will convert between the two. Although Deferred and Rx have vast differences, there are some similarities which one may wish to take advantage of. For those who have...

Graham Odds

Flex, Silverlight or HTML5? Time to decide...

Building on the experience and expertise within Scott Logic, my colleague, Colin Eberhardt, has produced an excellent whitepaper considering the three big web technologies at the moment: Flex, Silverlight and HTML5. Recent advances in web technologies have resulted in a complex landscape for applicationdevelopers to navigate. Coupled with the recent...

Colin Eberhardt

White Paper: Flex, Silverlight or HTML5? Time to decide...

When meeting current and prospective clients the subject of web technology choice often arises. There has been a great deal of confusion and uncertainty out there, even before Microsoft's perceived change of stance with respect to Silverlight emerged. This white paper is intended to help technology decision makers come to...

Graham Odds

Updating Flex Sparkline to Flex 4

In a previous post I presented a library of sparkline implementations for Flex 3. I have finally gotten round to updating it for Flex 4. The new source code, documentation and pre-compiled swf (namespace: http://www.scottlogic.com/sparkline) can be obtained from here. As before, the components are being made available under the...

Colin Eberhardt

A Silverlight Resizable TextBlock (and other resizable things)

In this blog post I present a simple attached behaviour that uses a Thumb control within a Popup to adorn any UI element so that the user can re-size it. A simple feature that has become quite popular on the web is to attache a small handle to text areas...

Jonathan Cardy

Web Workers Part 4: Wrapping it Up

Update: I have summarised this series of blog posts in a CodeProject article, available here. In this series of posts I showed a sweet way to use Web Workers to improve performance on browsers that support them, without impacting performance on browsers that don't, by using jQuery 1.5 Deferred objects...

Jonathan Cardy

Web Workers Part 3: Creating a Generic Worker

In the previous post we set up a Web Worker helper function that allowed us to create a worker file, and call it using code like this: $.work({file: 'primes.js', args: { from: 1, to: 100000 }}).then(function(data) { //Worker completed successfully console.log(data); }); Now, wouldn't it be nice if you didn't...

Jonathan Cardy

Web Workers Part 1: Performance

The Web Workers API is currently a draft HTML5 specification which defines an API for running JavaScript in a background thread. In this series of blog posts I am going to investigate the practical use of Web Workers. In this first blog post I want to look at the performance...

Jonathan Cardy

Web Workers Part 2: Using jQuery Deferred

The .NET Task Parallel Library is a great advance in parallel programming for the .NET framework. It lets us easily run an anonymous method in another thread without any worries about the actual thread creation. A Task object wraps up a piece of parallel code, and provides a notification of...

Colin Eberhardt

A Circular ProgressBar Style using an Attached ViewModel

This blog post describes how to re-template the Silverlight ProgressBar control to render a circular progress indicator. This approach uses an attached view model to circumnavigate some of the limitations of the ProgressBar design. This blog post describes the creation of the following funky styles for the ProgressBar (and a...

Colin Eberhardt

Automatically Showing ToolTips on a Trimmed TextBlock (Silverlight + WPF)

Both WPF and Silverlight have a property TextTrimming="WordEllipsis", which trims the text that a TextBlock displays based on the available width. This blog post describes a simple method for automatically showing the full text as a tooltip whenever the text is trimmed. This is presented as an attached behaviour and...

Graham Odds

Presentation Model (or MVVM) with Mate

This post introduces the Presentation Model (or MVVM) architectural pattern as one approach for creating "better" large-scale Flex applications and shows how the Mate Framework can be leveraged to not only achieve this pattern but increase separation of concerns above that of a "standard" Flex application. Background One of the...

Colin Eberhardt

#ukfuel - another Twitter / Bing Maps Mashup!

A few weeks ago I blogged about a Twitter / Bing Maps mashup that I had created for tracking snowfall in the UK via the #uksnow twitter hashtag. Last week I spotted a number of people in the uk who were using a new hashtag #ukfuel for tweeting fuel prices...

Colin Eberhardt

Automatically Showing ToolTips on a Trimmed TextBlock (Silverlight)

Silverlight 4 added TextTrimming="WordEllipsis", which trims the text that a TextBlock displays based on the available width. This blog post describes a simple method for automatically showing the full text as a tooltip whenever the text is trimmed. This is presented as an attached behaviour. UPDATE: I have updated this...

Colin Eberhardt

#ukfuel - a Twitter / Bing Maps Mashup for Tracking Fuel Prices

A few weeks ago I created a Silverlight version of the #uksnow Twitter mashup, which plots twitter users snow reports on a UK map. Yesterday I spotted a new geographically encoded hashtag, #ukfuel. Twitter users are using this hashtag to share local fuel prices across the UK. The format of...

Mark Rhodes

Animating HTML "Ranking" Tables with jQuery

This post details a jQuery plugin which animates updates to HTML tables representing rankings.

Colin Eberhardt

#uksnow #silverlight The Movie! - Happy Christmas.

It's Christmas Eve and time for some fun! A few weeks back I published an article on Reactive Extensions where I created a Bing Maps / Twitter mashup that plotted the geolocation of #uksnow twitter tags. This twitter hashtag was popularised by Ben Marsh and is used by us weather...

Luke Page

CSS 3 Transitions vs jQuery

Introduction This post is me taking a break from the CSS Performance series. I have the next post almost written though... I was reading an article on CSS 3 transitions that was very interesting, but as I was reading, it seemed like the feature was designed for CSS designers -...

Colin Eberhardt

A Simplified Grid Markup for Silverlight and WPF

The WPF / Silverlight syntax is long and cumbersome. This blog post describe a simple attached property that allows you to specify row and column widths / heights as a simple comma separated list, e.g. RowDefinitions="Auto,,3*,,,,2*" The Grid is probably one of the most useful and versatile layouts that Silverlight...

Colin Eberhardt

Silverlight 5 Adoption Predictions

The announced launch of Silverlight 5 has got the developer community all excited about improved media capabilities, MVVM support, printing and 3D, but how will Silverlight adoption evolve throughout 2011. In this blog post I look at historic data and use this to predict a 76% adoption of Silverlight 5...

Colin Eberhardt

UKSnow Silverlight Twitter / Bing Maps mashup - Sourcecode available

Just a quick update ... I have published an article on codeproject "Exploring Reactive Extensions (Rx) through Twitter and Bing Maps Mashups" which includes the sourcecode for my uksnow mashup. For the next few days, please let is snow ... Regards, Colin E.

Colin Eberhardt

UKSnow Silverlight - An Rx powered Twitter, Bing Maps mashup.

UPDATE: I have published an article on codeproject "Exploring Reactive Extensions (Rx) through Twitter and Bing Maps Mashups", which has the full sourcecode for this mashup. A week ago a colleague of mine posted an interesting article on parallelism in .NET 4.0 which included a few different libraries for asynchronous...

Chris Price

HTML5 Charts vs Flex Charts vs Silverlight Charts - a Test of Performance

This post follows on from the comparisons by Colin, of two Silverlight chart libraries, and Graham, of Flex and Silverlight chart libraries. In this post I add an HTML5 chart library into the mix. The results show that the HTML5 Charts perform easily as well as the others in HTML5...

Graham Odds

Flex Charts vs Silverlight Charts - a test of Performance

This post follows on from the comparison of two Silverlight chart libraries produced by my colleague, Colin Eberhardt, by adding an implementation of the simple image processing tool in Flex using the Flex Charting library to the comparison. The results show that the Flex Charts perform easily as well as...

Colin Eberhardt

Visiblox Charts vs. Silverlight Toolkit Charts - a test of Performance

This blog post compares the performance of the Visiblox and Silverlight Toolkit charts using a simple image processing tool to test and illustrate their differences in performance. The results show that the Visiblox charts are approximately 50 - 100 times faster that the Silverlight Toolkit charts. UPDATE: I have published...

Colin Eberhardt

Does HTML5 mean the end is in sight for Silverlight?

This blog post looks at the fallout after last week's PDC conference where Microsoft were quoted as saying "our strategy on Silverlight has shifted", and the resulting fallout in the developer community. In this post I will describe why I think Silverlight has a future ahead of it and exactly...

Colin Eberhardt

Developing a Lookless Silverlight Gauge Control (part 2)

In a previous blog post I described the process of creating a lookless gauge control. I introduced the concept of an attached view model which separates view specific concepts from the control. In this post I demonstrate how this allows for great flexibility when re-templating the control. In my previous...

Colin Eberhardt

Silverlight as an alternative to PowerPoint

Recently I gave a presentation on cross platform application development with Silverlight, WPF and WP7. I wanted to move away from the standard PowerPoint bullet-point driven presentation style, so decided to create a presentation as a Silverlight application running in full-screen mode. This blog post describes the steps I took...

Colin Eberhardt

White Paper: Silverlight, WPF and Windows Phone 7 cross platform development

Last week I gave a presentation at a joint Scott Logic / Microsoft event about how WPF and Silverlight are unifying the development platform for desktop, web and mobile. To accompany the talk I wrote a white paper which delves into this subject in a little more detail. You can...

Colin Eberhardt

Templates, or Why I love WPF (and Silverlight Too!)

This post compares the implementation of a simple ListBox layout with Windows Forms and Windows Presentation Foundation. The use of Templates within WPF are a clear winner over the WinForms 'owner draw' route. Application user interfaces are becoming much more graphical, with users expecting a more engaging and 'lively' experience....

Colin Eberhardt

Developing a (very) Lookless Silverlight Radial Gauge Control

This blog post describes the development of a lookless radial gauge control. In this post I will explore the use of an attached view model in order to move view specific properties and logic out of the control code in order to give a truly lookless control. Today I had...

Colin Eberhardt

Silverlight MultiBinding updated, adding support for ElementName and TwoWay binding

This blog post describes an update to the Silverlight 4 MultiBinding technique I blogged about a couple of months ago to add support for ElementName binding and TwoWay binding. A few months ago I posted an update to my MultiBinding solution for Silverlight 4. This technique allows you to perform...

Graham Odds

Logging to Server from Flex

An issue that can crop up with Flex applications is the lack of any log information to match up against users' bug reports. It is possible to configure the debug version of Flash Player to record trace() output, but most users do not have this setup. Additionally, it is much...

Colin Eberhardt

Exposing and Binding to a Silverlight ScrollViewer's Scrollbars

The Silverlight ScrollViewer exposes readonly properties which indicate the current vertical and horizontal scroll offset, and methods for setting the current offset. In this blog post I demonstrate a simple attached behaviour that exposes these offsets as read / write dependency properties allowing them to be bound to. The Silverlight...

Colin Eberhardt

Modal dialogs in cross-platform WPF/Silverlight applications

This blog post looks at the problem of showing modal dialog windows in applications that target both the Silverlight and WPF platforms. A solution is provided which allows modal dialogs to be written that work well for both technologies. Silverlight is, roughly speaking, a subset of Windows Presentation Foundation (WPF)....

Colin Eberhardt

Throttling Silverlight Mouse Events to Keep the UI Responsive

If your Silverlight application performs intensive updates to the UI during mouse events, the UI can freeze because it is invalidated before it has a chance to render. This post describes a technique for 'throttling' mouse events to ensure that each time an event occurs, the UI has the opportunity...

Colin Eberhardt

Silverlight MultiBinding solution for Silverlight 4

In this post I describe an update to the Silverlight MultiBinding solution I presented last year. This update includes support for Silverlight 4, attached properties and multiple bindings on a single object. UPDATE: I have updated this code to include ElementName and TwoWay binding. Grab the latest copy here. MultiBinding...

Colin Eberhardt

Binding a Silverlight 3 DataGrid to dynamic data via IDictionary (Updated)

In this post I demonstrate a method for binding a Silverlight 3 DataGrid to dynamic data, i.e. data which does not have properties that are known at design time. This technique results in a bound grid which is sortable and editable. This blog post is a bug fix (due to...

Graham Odds

Flex Sparkline

Sparklines are described by their inventor, Edward Tufte, as "data-intense, design-simple, word-sized graphics". They are an ideal tool for displaying trends for single entries within large data sets, for example stock prices. As well as the standard miniature line series, Tufte's original specification introduces a ternary sparkline, a.k.a. win-loss sparkline,...

Colin Eberhardt

Rippling Reflection Effect with Silverlight 3's WriteableBitmap

This blog post demonstrates how Silvelight 3's WriteableBitmap can be used to create a UserControl that renders the content of any other Framework Element as a reflection with an animated ripple effect.

Colin Eberhardt

Silverlight 4 beta released leaving Flex behind

This post looks at the speed of development of the two leading RIA frameworks, Silverlight and Flex, giving unequivocal proof that Silverlight is better than Flex ... ! This week at Microsoft's Professional Developers Conference (PDC), there have been two big news stories. The first is the give-away of a...

Colin Eberhardt

Helpful extension methods for Show / Hide animations in Silverlight

Today's blog post is a couple of very simple utility methods that I have found myself using again and again ... The animations that Silverlight developers have at their disposal are both varied and powerful. It is easy to get carried away and cover your application with gratuitous animations, which...

Colin Eberhardt

News on Silverlight adoption from the Silverlight 3 UK Launch

Yesterday myself and Gary Scott (our MD) went down to London for the Silverlight 3 UK launch event. This is the first time I have been to Microsoft's London office so I wasn't quite sure what to expect. The glass-clad arched office exterior, and shiny minimalist interior were certainly stylish,...

Colin Eberhardt

Silverlight v3 ClearType Font Rendering - A comparison

Text rendering has been a problem for both Silverlight and WPF for a while. This blog post looks at ClearType in Silverlight v3 and compares it to WPF and WinForms text rendering. Text clarity is something that concerns me quite a bit. In financial applications, often large quantities of both...

Colin Eberhardt

Silverlight 3 UK launch ... and the future of WPF?

A brief article on the launch of Silverlight 3 and why the interest in Silverlight is eclipsing that of WPF. The excitement behind Silverlight has been gaining in momentum throughout this year, with one of the highpoints being the MIX09 conference in March this year where the announcement of Silverlight...

Colin Eberhardt

Silverlight MultiBindings, How to attached multiple bindings to a single property.

This blog posts describes a technique for associating multiple bindings with a single dependency property within Silverlight applications. WPF already has this functionality in the form of MultiBindings, the code in this post emulates this function. UPDATE: Silverlight 4, attached properties and multiple property bindings are all supported in my...

Colin Eberhardt

Silverlight ClipToBounds - Can I Clip It?, Yes You Can!

With Silverlight, Panels do not clip their contents by default. See the following example: Where we have a Grid containing another Grid which itself contains an ellipse, and a Canvas which contains an ellipse: <Grid x:Name="LayoutRoot" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid Grid.Column="0" Background="Blue" Margin="20"> <Grid Background="Yellow" Margin="20,40,-20,20">...

Colin Eberhardt

New codeproject article on WPF, Silverlight + T4 Templates

I have just finished a new article on CodeProject - Generate WPF and Silverlight Dependency Properties using T4 Templates

Colin Eberhardt

Binding a Silverlight DataGrid to dynamic data Part 2 - editable data and INotifyPropertyChanged

UPDATE: This blog post was written with a SL2 DataGrid, for SL3, please see my updated blog post. In my previous blog post I described a method for solving the commonly faced problem of binding a Silverlight DataGrid to dynamic data, the form of which is not know at compile...

Colin Eberhardt

Binding a Silverlight DataGrid to dynamic data via IDictionary

This post demonstrates a technique for binding a Silverlight DataGrid to dynamic data, the structure of which is not know at compile-time ... UPDATE #1: I have extended this technique to add include change notification so that the DataGrid can be made editable. Read all about it in part two....

Graham Odds

Missing values in Flex charts

An oddness in default behaviour that can throw those new to Flex Charting is that segments in charts that should correspond to a data point are missing. By this I mean charts like those in the following example: When what is actually desired is the following: This is achieved by...

Colin Eberhardt

Silverlight Dependency Property Code Generation

This blog details a technique for generating Silverlight dependency properties from an XML file via a T4 template. If you just want to grab the code, scroll to the bottom of this article and download the sourcecode or cut and paste the templates. If you want to find out how...

Graham Odds

Custom data tips in stacked Flex charts

The number of frustrating decisions in Flex's charting API is minimal, but high up on my list is a strange decision that prevents developers from accessing information that is frequently desirable for custom data tips in stacked area, bar and column charts. The default data tips for stacked charts display,...

Colin Eberhardt

Adding a Location Crosshair to Silverlight charts (again!)

Silverlight is moving fast. Really fast. The recent MIX09 conference saw the release of Silverlight 3 (Beta) and also a new release of the Silverlight Toolkit. All this change is making it hard for us bloggers to keep up! Just over a month ago I posted an article on this...

Colin Eberhardt

Silverlight 3 is here! (but is it a flash killer yet?)

Less than 24 hours ago Microsoft's MIX09 conference kicked of in Las Vegas with Silverlight 3 taking centre stage. For those of you who have followed the conference build-up, this comes as no surprise, with twice as many Silverlight sessions (31) advertised than any other technology (WPF has a measly...

Graham Odds

Save Flex chart as image

The ability to allow a user to save a Flex chart, or in fact any Flex UI component, as an image has popped up on my radar several times over the last few years. Solutions to the problem have generally involved producing a pop-up window with the UI component as...

Colin Eberhardt

Implementing RelativeSource binding in Silverlight

In my previous post I demonstrated how an the WPF ElementName style binding can be emulated with Silverlight via an attached behaviour. As a brief recap, the technique involved creating an attached property, which when bound, adds a handler for the elements Loaded event. When the element is loaded, the...

Colin Eberhardt

ElementName binding in Silverlight via Attached Behaviours

As a relative newcomer to Silverlight I was happily greeted by the warm feeling of familiarity when I started developing. It is surprisingly easy to make the transition from WPF to Silverlight developer, with most of the core concepts being just the same. However, there are some parts of the...

Colin Eberhardt

Adding a Location Crosshair to Silverlight Charts

UPDATE - The March09 update of the Silverlight toolkit is incompatible with the code detailed below. For an up-to-date version see the following blog post. This blog post describes how to add a location crosshair to your Silverlight charts as shown below: The chart itself is rendered using the charting...