James Jackson-South

Context based property mapping with UmbMapper

Mon, 21 Aug 2017 10:15:26 Z

Mo Mapping, Mo Problems

A few weeks ago I wrote an article about my new Umbraco mapping engine UmbMapper. If you haven't read that post please do, and better yet, please download it and give it a try.

There's been a longstanding puzzle I've been trying to solve for a while now with mapping engines. One that I couldn't crack with Ditto and until today I didn't think I could solve it with UmbMapper.

I was wrong :)

The Problem

Consider the following POCO class.

public class Page {

    public string Name { get; set; }

    public string Slug => this.Name.ToUrlSegment();
}

Mapping this kind of class is impossible with conventional reflection-based run-time mappers as there is no way to guarantee that the Name property has a value. You'll get a NullReferenceException and a whole heap of frustration.

You can workaround this with Umbraco but it's not pretty. You could either

Turn Slug into a method which works but makes it impossible to serialize.
Create an event handler to calculate and store the property when saving the doctype. This is oh-so-ugly and means spreading logic all over the place.

The Solution

With UmbMapper you can map these properties in the following manner.

First let's define our class.

public class Page {

    public string Name { get; set; }

    public string Slug { get; set; }
}

And our mapper.

public class PageMap : MapperConfig<Page>
{
    public PageMap()
    {
        this.AddMap(p => p.Name);
        this.AddMap(p => p.Slug).MapFromInstance(i => i.Name.ToUrlSlug());
    }
}

The MapFromInstance method is our friend here. This has the following signature.

/// <summary>
/// Sets the property mapping predicate. Used for mapping from known values in the current instance.
/// </summary>
/// <param name="predicate">The mapping predicate</param>
/// <returns>The <see cref="PropertyMap{T}"/></returns>
public PropertyMap<T> MapFromInstance(Func<T, object> predicate)

With this method we can map any combination of lazy/non-lazy properties at run-time and be guaranteed the correct result and we keep our mapping logic where it belongs.

Fantastic!

Get it While it's Hot!

Give UmbMapper a whirl, it's simple to use but immensely powerful giving you the means to create flexible, scalable Umbraco websites with very little effort.

Strong Typed Umbraco Mapping with UmbMapper

Sun, 13 Aug 2017 20:02:23 Z

Greetings and Salutations!

It's not often I write code I'm immediately happy with and proud of but this happened to me just recently so I thought I'd share it with the community.

As I'm sure you know, dear reader, I'm a big fan of a pretty sweet CMS made by some fantastic friends of mine in Denmark called Umbraco. If you haven't played around with it, please do, it stands out, in my opinion, as easily the most usable, flexible, and fun to work with CMS in the NET ecosystem by a country mile.

I'm always looking for inventive ways to work with it and to make it even easier for others to do so as well so when I had a flash of inspiration lying, flu-ridden on my couch I had to pop a couple of pills, crank open the laptop, and furiously tap away to produce what I'm sharing.

A Little History

I've been writing mapping code for Umbraco for a few years now with two of the big guns in the Umbraco package scene, Lee and Matt. You might have heard of the package we produced together called Ditto

I'm proud of what we achieved with Ditto. I think we've managed to push attribute based mapping about as far as it can go, crafting a very performant, very flexible system that has served me well (and I think many others) over the years.

I even wrote an article about it a couple of years ago in the fantastic Skrift magazine.

As my skill-set has grown though and my tastes have changed I have found myself curious about how far and fast I can push mapping.

Introducing UmbMapper

Not the most exciting name ever but definitely some of the most exciting code I've come up with.

UmbMapper is a new, convention-based mapper that I've written for mapping IPublishedContent to strong-typed POCO classes. Strong-typed? Let's quote my own words from a couple of years ago.

Opens dictionary… Strong typing involves the strict enforcement of type rules with no exceptions, allowing the detection of incorrect type usage either at run time or at compile time. Having strong typing catches more type errors than weak typing, resulting in fewer hard errors. It can cut down on many hours of painful debugging.

Umbraco offers what I would call "Stringly Typing". You can get your property type out of the API but you have to pass a string in order to do so. That’s pretty damn cool but it doesn’t quite feel natural and easy enough for me to use as a developer. I’m lazy and the last thing I want to do it type lots and learn how to spell things.

Clued up? Great, let's carry on.

The Elevator Pitch

Why use it? Well, let me explain.

UmbMapper works in a completely different way to Ditto and ModelsBuilder. It uses the concept of convention-based mapping configuration classes to do the work for you which allows you to perform fine-grained mapping with very little overhead.

I want my POCO's to be super lean and you should too. Imagine getting to write code like this in your Umbraco project to represent your document types.

public class PublishedItem
{
    public int Id { get; set; }

    public string Name { get; set; }

    public DateTime CreateDate { get; set; }

    public DateTime UpdateDate { get; set; }

    public MyEnum MyEnumType{ get; set; }

    public Image Image { get; set; }

    public RelatedLink Link { get; set; }
}

Ain't that pretty? No attributes, no inheriting of particular interfaces, nothing but pure, good old fashioned POCO goodness! This makes it great for larger projects (As well as small ones) where you can apply design patterns like DDD to maintain flexibility and help your application scale.

So how do we map it? Here's where the magic happens.

public class PublishedItemMap : MapperConfig<PublishedItem>
{
    public PublishedItemMap()
    {
        this.AddMap(p => p.Id);
        this.AddMap(p => p.Name);
        this.AddMap(p => p.CreateDate);
        this.AddMap(p => p.UpdateDate).SetAlias(p => p.UpdateDate, p => p.CreateDate);
        this.AddMap(p => p.MyEnumType).SetMapper<EnumPropertyMapper>();
        this.AddMap(p => p.Image).SetMapper<UmbracoPickerPropertyMapper>();
        this.AddMap(p => p.Link);
    }
}

Look at that API!! How crisp, how clean, how marvellous! But wait... It gets better.

For simpler classes, there are more terse mapping methods available

public class PublishedItemMap : MapperConfig<PublishedItem>
{
    public PublishedItemMap()
    {
        this.AddMappings(
            x => x.Id,
            x => x.Name,
            x => x.DocumentTypeAlias,
            x => x.Level).ForEachIndexed((x, i) => x.AsLazy());

        this.AddMappings(
            x => x.SortOrder,
            x => x.CreateDate,
            x => x.UpdateDate).ForEach(x => x.AsLazy());
    }
}

Or for really, really simple classes

public class LazyPublishedItemMap : MapperConfig<LazyPublishedItem>
{
    public LazyPublishedItemMap()
    {
        this.MapAll().ForEachIndexed((x, i) => x.AsLazy());

        this.MapAll().ForEach(x => x.AsLazy());
    }
}

Registering a mapper is as easy as follows

MapperConfigRegistry.AddMapper(new LazyPublishedItemMap());

Now that's what I call a nice API; super simple to use but powerful with a multitude of other mapping instructions available.

Configuration

The AddMap() method and subsequent methods called in the mapper constructor each return a PropertyMap<T> where T is the class you want to map to. This allows us to use a simple fluent API to configure each property map.

The various mapping configuration options are as follows:

AddMap() Instructs the mapper to map the property.
AddMappings() Instructs the mapper to map the collection of properties.
MapAll() Instructs the mapper to map all the properties in the class.
SetAlias() Instructs the mapper what aliases to look for in the document type. The order given is the checking order. Case-insensitive.
SetMapper() Instructs the mapper what specific IPropertyMapper implementation to use for mapping the property. All properties are initially automatically mapped using the UmbracoPickerPropertyMapper.
SetCulture() Instructs the mapper what culture to use when mapping values. Defaults to the current culture contained within the UmbracoContext.
AsRecursive() Instructs the mapper to recursively traverse up the document tree looking for a value to map.
AsLazy() Instructs the mapper to map the property lazily using dynamic proxy generation. You need to mark your property with the virtual keyword for that to work.

Available IPropertyMapperimplementations all inherit from the PropertyMapperBase class and are as follows:

UmbracoPickerPropertyMapper The default mapper. Maps directly from Umbraco's Published Content Cache via GetPropertyValue. Runs automatically.
EnumPropertyMapper Maps to enum values. Can handle both integer and string values.
UmbracoPickerPropertyMapper Maps from all the Umbraco built-in pickers.
DocTypeFactoryPropertyMapper Allows mapping from mixed IPublishedContent sources like Nested Content. Inherits FactoryPropertyMapperBase.

These mappers handle most use cases since they rely initially on Umbraco's PropertyValueConverter API. Additional mappers can be easily created by inheriting the PropertyMapperBase class which give you all the properties you need.

I've already built you mappers for Archetype and NuPickers though so you don't need to worry about those :)

In Summary

I'm hoping by now you can see how beneficial UmbMapper can be in your projects. It's fast, easy to use and should help you build flexible, scalable Umbraco websites giving you the freedom to spend less time boiler-plating and more time concentrating on the fun stuff.

Please visit the Github repo and download the packages from Nuget and if you have any questions, just holler and I'll do my best to help you out.

Thanks for reading!

Update

I was asked by my good friend Mads on Twitter to elaborate on how lazy mapping works so I thought I best do so.

Any sufficiently advanced technology is indistinguishable from magic. - Gandalf the Grey

If a mapper is configured using the AsLazy() instruction and the class contains properties using the virtual keyword, the mapper will generate a dynamic proxy class at run-time to represent the type we are mapping to. This class actually inherits our target class and you'll be able to see it by attaching a debugger.

The class looks something like this:

public class LazyPublishedItemProxy : LazyPublishedItem, IProxy
{
    /// <summary>
    /// Gets or sets the <see cref="IInterceptor"/> for intercepting 
    /// <see cref="System.Reflection.MethodBase"/> calls.
    /// </summary>
    IInterceptor Interceptor { get; set; }

    // Property interceptors are written below using Reflection.Emit
}

Any properties configured with lazy mapping are not actually mapped until you specifically call the getter on the property. (Via means of MethodInfo interception using the terribly complicated Reflection.Emit API).

This means that we can map large collections with very little overhead. MEGAWHOOP!

It was really interesting code to write so I encourage you to look through the source to see how it was all put together, it's very similar to how Entity Framework used to lazy map navigation properties.

When to use it?

I recommend using this when mapping any pickers or anything that requires significant work when mapped via the Property Value Converter API. You'll most likely be able to use it on all properties but I would always load test any large sites to strike the right performance balance.

ImageSharp.Web (My continued plans for world image dominance)

Fri, 19 May 2017 06:08:11 Z

I better build this before someone else does!

I recently read a series of blog posts by Andrew Lock comparing ImageSharp to CoreCompat.System.Drawing in which he creates a simple ASP.NET Core Middleware for resizing image via a URI API. They're really, really great and I suggest you read them.

These posts got me thinking though... I knew I was always going to build a URI API, I just didn't know when I was going to get around to it. I mean... I spend every spare waking hour plus ones I should be sleeping just now building ImageSharp (Big HINT help me finish the bloody thing, it's been TWO YEARS!)

It had to happen sooner rather than later as people are getting twitchy and ImageSharp is getting very close to a beta release, so inspired by Andrew's brilliant writing I got busy...

Introducing ImageSharp.Web

ImageSharp.Web is everything I wished ImageProcessor.Web was and I've only been writing the code for two days. I'm that happy with it. :)

It runs on ASP.NET Core Middleware, is super extensible, and, should be able to support all your web-based imaging needs once finished.

You can see the codebase as of time of writing here

So how does it work?

The Pipeline

The hip bone's connected to the...

The Middleware intercepts the current request, an IUriParser parses the request looking for commands and creates a dictionary of results.
An IImageService is assigned to the request. This will grab the image if required.
An IImageCache checks the cache for any previously processed results, if one found, we return the correct response (304, 200) and exit.
Non cached? We process the file using a collection of IImageWebProcessor instances using our collected commands via a CommandParser.
The resultant image is cached using the IImageCache and we return the result with the correct headers.

Simples!

If all goes well you get something like the following.

So lets examine some of the interfaces I just mentioned.

Behind the Curtain

All the interfaces described in the pipeline are injected via the ASP.NET Core Dependency Injection container so you can replace them at will.

IUriParser

This is a neat little interface inspired by some feedback from Andrew that allows you to choose how commands are parsed from the URI.

public interface IUriParser
{
    IDictionary<string, string> ParseUriCommands(HttpContext context);
}

By default ImageSharp.Web will parse querystring parameters but there's nothing to stop you from replacing that with something else. Maybe you want to parse something like /resize/{width}/{height}/{path} who knows?!

IImageService

This interface is very similar to the ones found in ImageProcessor.Web except it's a bit simpler

public interface IImageService
{
    string Key { get; set; }

    IDictionary<string, string> Settings { get; set; }

    Task<bool> IsValidRequestAsync(HttpContext context, ILogger logger, string path);

    Task<byte[]> ResolveImageAsync(HttpContext context, ILogger logger, string path);
}

The key property there indicates an identifier in the URI that we use to choose which service to implement e.g http://mysite.com/remote/http://remote-image.jpg?width=200 would resolve to a RemoteImageService (not built yet) as it uses the remote prefix. Any implementations without a prefix match all requests.

I've put together one so far, the PhysicalFileImageService. You can see the code for that here. It's pretty simple but leverages the DI container to get certain functionality.

IImageCache

I didn't want to build this at first as I wanted to use the built in primitives like IDistributedCache but the API of those primitives was both more complicated than I needed and also lacked the functionality to check if a cached item existed without retrieving it.

public interface IImageCache
{
    IDictionary<string, string> Settings { get; set; }

    Task<CachedBuffer> GetAsync(string key);

    Task<CachedInfo> IsExpiredAsync(string key, DateTime minDateUtc);

    Task<DateTimeOffset> SetAsync(string key, byte[] value, int length);
}

It's again pretty simple but contains enough information to create any kind of cache you require. I've written a PhysicalFileSystemCache implementation so far for non-multi-tenant applications but I plan on creating others for Azure etc. (I will probably charge a small fee for those though as I need to start making some money off the back of my work )

IImageWebProcessor

This is how we actually process the image. We pass our commands and process the image accordingly. There's an overload to Image<TPixel> that loops through available processors.

public interface IImageWebProcessor
{
    IEnumerable<string> Commands { get; }

    Image<TPixel> Process<TPixel>(Image<TPixel> image, ILogger logger, IDictionary<string, string> commands)
        where TPixel : struct, IPixel<TPixel>;
}

Here's the source code for the ResizeWebProcessor. This allows you to choose all the available resize options including the size, mode, and sampler. I'll knock up another couple of processors also that ship out-of-the-box too. AutoRotate, Format & BackgroundColor. Any additional ones will require $$ I'm afraid.

Commands

Parsing input commands is a non-trivial task. The web is a hostile environment and you not only have to deal with potential attacks, you have to deal with developers who are not keen on reading documentation. As such I have had to write a pluggable system of ICommandConverter implementations that are used by the CommandParser singleton to deal with common parsing tasks. Again, this is extensible.

Rich Returns

The Middleware returns the correct response type for processed images (200, 304) and instructs the browser to cache the images for a configurable number of days (we max out by default at 365 days but of course this is configurable)!

As such you will see a server response like the following.

Default Response

The result is processed and returned as normal.

Cached Response

The result is cached so no request is made to the server.. Nippy!

There'll be an event that you can tap into also to add additional headers like Cors headers.

Gimme, Gimme, Gimme!

So when can you get your hands on this?

Well... As soon as the main ImageSharp library is ready for primetime I'll release a Nuget package for ImageSharp.Web. By then any issues will be long ironed out and you'll have a great solution to you image processing needs in .NET Core.

Of course, the sooner you give us a hand, the sooner that can happen ;)

Please comment below, your feedback is super useful!

Wrangling The Microsoft MVP Activity Bookmarklet

Sun, 05 Feb 2017 18:57:26 Z

I'm lucky enough to be a Microsoft MVP in Visual Studio and Development Technologies which is absolutely fantastic. I've been having trouble submitting my work though in an efficient manner so I thought I'd put this short post together to show how I got the MVP Submit Activity Bookmarklet to bend to my will in Microsoft Edge so I can help others in a similar situation.

The Problem

The "Submit Activity" interface in the MVP website is not great. It's clunky, slow, requires a lot of fields, and requires a lot of tab switching. I find it off-putting to use which means I don't fill it in when I should. Fortunately Microsoft offered an alternative approach.

All is good. Except that it isn't. There's a couple of issues.

The bookmarklet is fundamentally broken, expecting a relative path in it's code. This means it doesn't work on any page other than within the MVP site!
When fixed, that bookmarklet doesn't work in Chrome asking you to sign in when you already are.
Microsoft Edge doesn't support adding bookmarklets through it's interface.

Fortunately we can fix this.

The Solution

Fixing the Source

First we need to fix the JavaScript snippet so that it actually works.

Here's the original code.

javascript: (function () {
    if (window.myBookmarklet !== undefined) {
        myBookmarklet();
    } else {
        document.body.appendChild(document.createElement('script')).src = '/Content/Scripts/bookmarklet.js?';
    }
})();

See the issue? Yeah that relative src path is never gonna work!

So knowing the correct URL (Since we know that it works within the MVP site) let's update that.

javascript: (function () {
    if (window.myBookmarklet !== undefined) {
        myBookmarklet();
    } else {
        document.body.appendChild(document.createElement('script')).src = 'https://mvp.microsoft.com/Content/Scripts/bookmarklet.js?';
    }
})();

Ok we have fixed the source code but that's only half of the solution. When we try to use the updated bookmarklet code in Chrome (A browser that natively supports bookmarklets) we are greeted with this.

But I'm already signed in! Let's give Edge a try since it's Microsoft product and they always work together right.... Right?

Wrong! As discussed before Microsoft Edge doesn't natively support bookmarklets to we are going to turn to a 3rd paty tool to help us out. Edge Management.

Edge Management To The Rescue!

Edge Management is a handy little tool written by a gentleman called Emmet Gray that allows you to manage your Favourites in a manner more consistent with other browsers. We'll use that to add a working bookmarklet.

First you need to create a standard bookmark. Add any page to your Favourites Bar naming it "Submit MVP Activity".
Then close Edge and open the Edge Management tool. Edit the URL with our updates code snippet.

That should have done the trick. Let's test it.

Voilà! It works... Now I can submit my work in a much more convenient manner and get back to the business of writing great code. (I've got a 2D graphics library to ship!)

Thanks for reading. I hope that you find it useful!

P.S If anyone who is on the team responsible for the MVP website is reading this please create a proper fix, or even better make the entire process less painful. The MVP website user interface is really quite annoying to use.

ImageProcessor Core

Mon, 05 Sep 2016 09:45:56 Z

So its been a while...

It's been roughly a year since my last blog post. I wrote it about a recent ImageProcessor release and opened the last paragraph with the following.

For me this release marks the last I shall actively work on in this major version. It might well be the last I do ever depending on what Microsoft do with graphics with the next .NET releases. I've fallen out of love with the open source community a little over the years due to the lack of collaboration I've received on this project and others.

Sad eh?... Well it turns out I lied. Not only have I released several updates to the V2 branch with some great contributions from the community, but I've been hard at work on something a little special... ImageProcessor Core

A Little History

In 2014 Microsoft blew everyone's minds by announcing that they were building a new, open source, cross-platform framework containing a subset of the full .NET Framework. Everyone rightfully got very excited but a few people (me included) started to worry about the lack of discussion around a graphics API. Issues were opened up on the Github repo and quite a few people pitched in with their two cents.

Nobody was doing anything though and it was very frustrating for me to watch.

You see, I have a dream...

I originally wrote ImageProcessor to make it easier for developers to do common tasks with System.Drawing. I kept seeing blog posts with copy/pasted code examples full of memory leaks and slow code and I wanted to make a difference and give back to a community I learned from.

ImageProcessor Core is an extension of that idea.

The Elevator Pitch

Common imaging tasks should be accessible to all developers. If you want to resize or crop an image you should be able to use a simple API and do so easily. You shouldn't have to worry about memory leaks and you shouldn't have to worry about binding to native libraries or deploying in different environments. It should be cross-platform and it should Just Work ™

Oh and of course it needs to be scalable and allow for complex operations and different pixel formats. You know... Simple stuff!

ImageProcessor Core is designed with that in mind.

So what can it do? As of writing ImageProcessor Core is still very much in alpha status but it turns out quite a lot.

I have....

Algorithms for common operations. Resize, Crop, Flip, Rotate, Edge Detection and so on.
Almost complete support for four different codecs. Bmp, Png, Gif, and of course the most complicated but commonplace of all Jpeg.
Full EXIF read and write capability using a simple API.
A generic image class that is signature compatible with Microsoft XNA Game Studio and MonoGame.
A snazzy new logo that I designed myself :)

And much much more..

Example Time

To demonstrate the API I will show you some code demonstrating some common tasks. Here's how to resize an image using the default bicubic resampler.

using (FileStream input = File.OpenRead("foo.jpg"))
using (FileStream output = File.OpenWrite("bar.jpg"))
{
    Image image = new Image(input);
    image.Resize(image.Width / 2, image.Height / 2)
         .Save(output);
}

Want to use a different resampler? We've got you covered.

using (FileStream input = File.OpenRead("foo.jpg"))
using (FileStream output = File.OpenWrite("bar.jpg"))
{
    Image image = new Image(input);
    image.Resize(image.Width / 2, image.Height / 2, new MitchellNetravaliResampler())
         .Save(output);
}

How about companding the image to resize with gamma correction?

using (FileStream input = File.OpenRead("foo.jpg"))
using (FileStream output = File.OpenWrite("bar.jpg"))
{
    Image image = new Image(input);
    image.Resize(image.Width / 2, image.Height / 2, true)
         .Save(output);
}

How about setting individual pixel values?

Image image = new Image(400, 400);
using (PixelAccessor<Color, uint> pixels = image.Lock())
{
    pixels[200, 200] = Color.White;
}

How easy is that?

The Image class is actually an implementation of a generic class Image<TColor, TPacked> where TColor implements an interface identical to the Microsoft XNA Game Studio and MonoGame IPackedVector<T>. This allows the library to work well with those frameworks and tightly control memory usage. Underneath the hood it's actually an Image<Color, uint>.

Performance

A lot of developers say that C# can never be truly fast. A lot of developers are wrong. I've got a long way to go yet but I've been able to get some pretty decent performance going in this early stage.

Check out this benchmark using the awesome BenchMarkDotNet comparing a 2000x2000 pixel image downsampled to 400x400 pixels.

Host Process Environment Information:
BenchmarkDotNet-Dev.Core=v0.9.9.0
OS=Microsoft Windows NT 6.2.9200.0
Processor=Intel(R) Core(TM) i7-4712HQ CPU 2.30GHz, ProcessorCount=8
Frequency=2240907 ticks, Resolution=446.2479 ns, Timer=TSC
CLR=MS.NET 4.0.30319.42000, Arch=64-bit RELEASE [RyuJIT]
GC=Concurrent Workstation
JitModules=clrjit-v4.6.1080.0

Type=Resize  Mode=Throughput
                        Method |     Median |    StdDev | Scaled | Scaled-SD |
         System.Drawing Resize | 66.2606 ms | 1.2463 ms |   1.00 |      0.00 |
     ImageProcessorCore Resize | 56.4141 ms | 1.0673 ms |   0.85 |      0.02 |

Other methods like Crop are much faster and Get/Set pixel is ~94% faster than the System.Drawing equivalent on my test machine. I'm very happy with progress so far and I'm sure I can go much faster.

So What's The Plan?

It's been a very long alpha but I think the API is pretty solid so I shall be moving out of alpha and into beta status soon. Beta releases will be hosted on Nuget as opposed to the current MyGet server though you shouldn't use it in production environments until I reach Release Candidate status.

In beta I shall be concentrating on filling out missing encoder support (you can help!) and really cranking up the performance.

I'd love to get 2D drawing added to the API but that's probably better off in V1.1 as there's a lot of work involved.

Want To Help?

Please do... Spread the word, contribute algorithms, submit performance improvements, unit tests. Play around with the API and tell me what is missing.

If you know someone who works in image processing please try to convince them to get involved.

There's simply no reason why as a community we cannot build an absolute first-class imaging API that can benefit all levels of developer.

So come on, visit the repo and get mucked in!

Please let me know what you think in the comments below.

Update

Shannon below wanted to see the logo so drink it in. Pure design... Take that Instagram!

Mo Images Mo Processing

Sun, 20 Sep 2015 04:16:08 Z

Today marks another big ImageProcessor release, and my first antipodean one - There's a lot going on so here's a run through of new functionality that's been added to Imageprocessor v2.4 and ImageProcessor.Web. v4.4

tl;dr... Upgrade

ImageProcessor

New Stuff

Resolution

This method allows you to change the resolution of the given image.

public ImageFactory Resolution(int horizontal, int vertical, PropertyTagResolutionUnit unit = PropertyTagResolutionUnit.Inch)

If any EXIF data is to be preserved, the metadata will be updated to match the given resolution.

Resize

With this release I've added two new resize modes to the library: ResizeMode.BoxPad and ResizeMode.Min.

ResizeMode.BoxPad

When upscaling an image using this mode the image pixels themselves are not resized, rather the image is padded to fit the given dimensions. When downscaling the image is resized using the rules defined by ResizeMode.Pad. As with that mode you can recolour the background colour of the padded area for image types without transparency from the default black.

Here's an example resizing the original to 500x500px:

Original Image

Padded Image With Hot Pink Background

As with ResizeMode.Pad and ResizeMode.Crop the position of the image can be anchored to one of nine different anchor points.

ResizeMode.Min

This mode looks for the shortest difference in each dimension between the source length and intended length. it will then resize that side to the intended length on the result, the other dimension is resized maintaining the aspect ratio of the original image. Upscaling is disabled in this mode and the original image will be returned if attempted.

Here's an example downscaling a larger version of the original with target dimensions of 500x500px:

Performance

I've managed to reduce the memory usage by up to 25% in some circumstances in this version by rewriting the way I ensure certain methods performs their functionality in the correct colour space. These rewrites have also slightly improved the speed on earlier releases which is a nice bonus.

Bug fixes

In this release I've ironed out numerous bugs relating to image resolution. EXIF metadata for any method that changes the dimension of the image are now updated also where previously this was overlooked.

ImageProcessor.Web

New Stuff

PostProcessing

This is a big one and I'm very pleased with it...

I'm all about keeping the web lean but the default image encoders in .NET are not that efficient and you can sometimes actually end up with a larger image than what you started with. As such, I've been looking at a way to ensure that anything I output has been optimised as much as possible. For previous versions of ImageProcessor.Web I developed a plugin that post-processed any newly cached images using a variety of tools to reduce the file size as much as possible.

This worked... To a point. Firstly it only worked with the disk cache and not any other cache plugins. Secondly it only acted after the first requests so someone, somewhere would always get an unoptimised image, Thirdly one of the tools I used, optipng was incorrectly detected as malware by Windows Defender.... Not good enough.

As of this version, every image that is processed using ImageProcessor.Web is passed through a series of tools that reduce the output size. This works with whatever cache implementation is used and can dramatically reduce the weight of your pages. This all happens asynchronously and stays snappy so you shouldn't notice any increased processing time.

Here's the built in tools I use so you can check them out:

gifsicle : http://www.lcdf.org/gifsicle/
pngout : http://advsys.net/ken/utils.htm#pngout
pngquant : https://pngquant.org/
jpegtran : http://jpegclub.org/

It's possible to turn off this behaviour vie the config but you really shouldn't.

Bug fixes

There's been various minor little issues I've found and fixed while building this update, one of note though was an issue where prefix values were globally replaced within the request url.

So... What's Next?

For me this release marks the last I shall actively work on in this major version. It might well be the last I do ever depending on what Microsoft do with graphics with the next .NET releases. I've fallen out of love with the open source community a little over the years due to the lack of collaboration I've received on this project and others.

When I started ImageProcessor I didn't know much about images. I was a front end developer who decided to have a go at solving a problem colleagues were struggling with. I'd only been writing C# for a very short while and I was learning as I went on.... I still am.

These libraries are now hugely popular with hundreds of thousands of downloads but the number of people who contribute is still minuscule. If I can write this stuff I guarantee there are a very great number of people out there who could do it and do it better.

I'm very grateful for the work and encouragement of the team at Umbraco for their faith in me and contribution to my code but I feel somewhat that they are alone in doing what they do best in promoting a healthy community around developers.

I'll still fix bugs but I will not add any more new features nor work on making the library cross-platform for now. It's simply too much work for me to do.

Help Me To Help You

If you want to see ImageProcessor continue and you know anyone with the chops to help me or think you can spend an hour a week tinkering away, please get in touch. I'd love to build a v3 as part of a community of developers creating something amazing.

Anyhoo... Enjoy the new releases. As ever you can read about them in the documentation and download them from Nuget.

Fun with UmbracoVirtualNodeRouteHandler

Wed, 13 May 2015 05:37:56 Z

This morning I answered a question on Our Umbraco regarding the best approach to provide a url allowing deep links for virtual nodes in Umbraco. In my answer I demonstrated how to use UmbracoVirtualNodeRouteHandler as a means of telling Umbraco what node to pass as my RenderModel.

Shannon talks about the UmbracoVirtualNodeRouteHandler with custom routing on his blog

I thought I'd expand on some of the functionality available to the developer by documenting a trick I use with implementations of UmbracoVirtualNodeRouteHandler to provide custom routing.

Use Case

Quite often I find myself reusing a single document type with multiple templates; I'm sure you have also. Most commonly a LoginRegisterPage or similar.

Now I don't know about you but one of the things I miss when using Umbraco is the ability to use Url.Action to generate urls for my content. I like routing in MVC and I think it's important, especially with the type of page as above to be able to generate the correct urls from within your views or controllers.

To understand what I am going to do here you first need to understand how routing works in Umbraco.

If you have the DocumentType LoginRegisterPage with the assigned template LoginPage this will map to a RenderMvcController called LoginRegisterPageController with an ActionResult LoginPage. This behaviour is standardised and predictable so we can utilise it.

DocumentType == Controller
Template == ActionResult

Example

So let's start by creating some routes.

// Custom routing for the membership pages so we can use
// proper redirects. 
RouteTable.Routes.MapUmbracoRoute(
"LoginPage",
"Login/",
new
{
    controller = "LoginRegisterPage",
    action = "LoginPage"
},
new LoginRegisterPageNodeRouteHandler());

RouteTable.Routes.MapUmbracoRoute(
"RegisterPage",
"Register/",
new
{
    controller = "LoginRegisterPage",
    action = "RegisterPage"
},
new LoginRegisterPageNodeRouteHandler());

Here I have created two routes that map to the relative urls /Login and /Register. They both map to the same controller but since two different templates are used it will map to two different ActionResult methods.

Note: I didn't use the word "virtual" in my handler names since I am mapping to actual nodes.

From here I will create a class that takes advantage of the predictability.

/// <summary>
/// An Umbraco route handler that allows the retrieval of the template alias name from the route action. 
/// </summary>
public abstract class TemplatedUmbracoVirtualNodeRouteHandler : UmbracoVirtualNodeRouteHandler
{
    /// <summary>
    /// Get the template from the current route.
    /// </summary>
    /// <param name="requestContext">
    /// The <see cref="RequestContext"/> containing information about the current HTTP request and route. 
    /// </param>
    /// <returns>
    /// The <see cref="string"/> representing the template alias.
    /// </returns>
    protected virtual string GetTemplateAlias(RequestContext requestContext)
    {
        return requestContext.RouteData.GetRequiredString("action");
    }
}

This class adds an additional method GetTemplateAlias to our handler pulling in the RouteData action variable which we know matches the template name of the node we want in the content tree.

And from here we can implement this our handler.

/// <summary>
/// The generic login/register page node route handler.
/// </summary>
public class LoginRegisterPageNodeRouteHandler : TemplatedUmbracoVirtualNodeRouteHandler
{
    /// <summary>
    /// returns the <see cref="IPublishedContent"/> associated with the route.
    /// </summary>
    /// <param name="requestContext">
    /// The request context.
    /// </param>
    /// <param name="umbracoContext">
    /// The umbraco context.
    /// </param>
    /// <returns>
    /// The <see cref="IPublishedContent"/>.
    /// </returns>
    protected override IPublishedContent FindContent(RequestContext requestContext, UmbracoContext umbracoContext)
    {
        UmbracoHelper helper = new UmbracoHelper(umbracoContext);
        string alias = typeof(LoginRegisterPage).Name;
        string templateAlias = this.GetTemplateAlias(requestContext);

        return helper.TypedContentAtRoot()
            .First()
            .Descendants()
            .First(d => d.DocumentTypeAlias.InvariantEquals(alias)
                     && d.GetTemplateAlias().InvariantEquals(templateAlias));
    }
}

Note: I use Ditto to create strong-typed models for my back office content. It's ace, you should give it a go!

If you look at the code in my handler you will see that I am searching the content for nodes that match both the name and template of the one I want.

It's as simple as that really... I can now use Url.Action("LoginPage", "LoginRegisterPage") and Url.Action("RegisterPage", "LoginRegisterPage") throughout my code to provide the correct urls to my respective pages priding me with functionality I sorely missed.

Experiments with Umbraco's IContentService

Wed, 25 Mar 2015 10:59:31 Z

I haven't had very much experience with the Umbraco ContentService. I've only just started playing around with it so if I've missed something obvious please tell me in the comments.

A Confusing API

Reading through the documentation, it seems a shade basic considering the importance of the subject matter and really doesn't go out of it's way to explain what to do and what will happen.

When saving an item using the content service, the methods signature for the first overload available for setting a property value is as follows.

IContentBase.SetValue(string propertyAlias, object value);

According to the documentation you should be able to set different types as the second argument. At time of writing they give the following example:

// Given a `ContentService` object get Content by its Id, set a few values
// and saves the Content through the `ContentService`
var content = contentService.GetById(1234);
content.SetValue("bodyText", "This text will be added to by RTE field");
content.SetValue("date", DateTime.Now);
contentService.Save(content);

Note the DateTime.Now instance there. Unfortunately support for the different types seems extremely limited. Passing a float causes the following exception.

The best overloaded method match for 'Umbraco.Core.Models.ContentBase.SetPropertyValue(string, string)' has some invalid arguments.

Yowza! That really doesn't give a great developer experience.

Magic Strings

Not much in Umbraco when dealing with content is strong-typed. If I were to hazard a guess as to why, ~~I would imagine it was because the code tooling to do some of the conversion functionality we can now was not available when the API's were designed.~~ (Update Turns out it was just a design decision). I have, however, felt the distinct impression at times through conversation that strong-typing is not wanted in certain areas.

I'm doing my best to provide it to developers when dealing with the cached IPublishedContent methods by contributing to Ditto. Content services, however, are not part of the scope for that project so having spent so much time developing with Umbraco in a strong-typed manner, coming across them here was a bit of a shock.

Let's look at that method again.

IContentBase.SetValue(string propertyAlias, object value);

The first parameter accepts a string. Now I don't know about you but the most common use case I would imagine for the method would be uploading a form or importing content through another service.

That form or service would contain classes with properties and using the API in this format would require the developer to insert magic strings for every property or use reflection to loop through with the property info name manipulating them for each instance.

Not code I want to write...

Expression Trees to the Rescue!

I wanted a way that I could call the method in the following format and not have to write those pesky strings:

IContentBase.SetValue(() => Class.Property);

In order to do that I will need to create an extension method that uses an Expression Tree. This is done by creating a Lambda Expression to represent the property.

Once inside our method we check to see whether, a property is being passed, and if so, coerce the various property values to call the old method with sanitized values.

/// <summary>
/// Sets the value of an <see cref="IContentBase"/> property to the given value.
/// </summary>
/// <param name="contentBase">
/// The <see cref="IContentBase"/>.
/// </param>
/// <param name="propertyLambda">
/// The <see cref="Expression"/> designating the value to save.
/// </param>
/// <typeparam name="T">
/// The <see cref="Type"/> of the property value.
/// </typeparam>
/// <exception cref="ArgumentException">
/// Thrown if the given <see cref="Expression"/> is not in the correct form.
/// </exception>
public static void SetValue<T>(this IContentBase contentBase, Expression<Func<T>> propertyLambda)
{
    MemberExpression expression = propertyLambda.Body as MemberExpression;

    if (expression == null)
    {
        throw new ArgumentException("You must pass a lambda of the form: '() => Class.Property' or '() => object.Property'");
    }

    PropertyInfo property = expression.Member as PropertyInfo;
    if (property != null)
    {
        MemberExpression member = (MemberExpression)expression.Expression;
        ConstantExpression constant = (ConstantExpression)member.Expression;
        object fieldInfoValue = ((FieldInfo)member.Member).GetValue(constant.Value);
        object value = property.GetValue(fieldInfoValue, null);
        string name = property.Name.ToSafeAlias(true);
        contentBase.SetValue(name, value.ToString());
    }
}

It's basic and doesn't take into account type conversion to and from strings, nor existing supported types but it's certainly a step in the right direction and better than what was there before.

Obviously, also, there is a an element of assumption in that technique in that we cannot predict what the alias will be and can only go on the most likely name based on the property. Personally though I don't believe the alias should be human editable and should be abstracted away with greater convention. That allows greater predictability and better quality code.

I would like to see more API signatures in Umbraco like the example I have created and would be more than happy to help try to tighten up the various APIs for the next major version.

Let me know what you think.

Announcing ImageProcessor.Web.PostProcessor

Thu, 18 Dec 2014 02:32:46 Z

The Nourishing Fruits of Boredom

So last night I got a little bored watching the old haunted fishtank and my mind, as it often does, drifted to code.

I started thinking about a talk that Mads Kristensen gave at CodeGarden this year that featured a tool he had written with Sayed I. Hashimi called Azure Image Optimizer which wraps various tools like Jpegtran and Gifsicle in an Azure Job to optimize your file based images. He writes about it here and the source can be found here.

I thought it was really nifty and since they've kindly released it under the wonderfully permissive Apache 2.0 license I decided to see if I could grab some of the goodies from the code and add something to ImageProcessor.Web.

Three hours later ImageProcessor.Web.PostProcessor was born...

How It Works

ImageProcessor.Web fires an event once an image has been processed and saved to the cache that can be wired up to asynchronously to further manipulate that file. Tapping into it is fairly simple.

ImageProcessingModule.OnPostProcessing += YOUR_POST_PROCESSING_METHOD_ASYNC;

private static async void YOUR_POST_PROCESSING_METHOD_ASYNC(object sender, PostProcessingEventArgs e)
{
     // Do your thang...
}

Where PostProcessingEventArgs contains a single property CachedImagePath.

In ImageProcessor.Web.PostProcessor I have embedded copies of the various image compressing tools: Gifsicle, Jpegtran, Optipng, and Pngout which are extracted into the running web applications folder and are used to further compress the cached images whenever the event is fired.

If a saving can be found then the cached file is replaced with the newly optimized image and voila your fancy-dancy website is now even leaner and you can celebrate by having a beverage of your choice.

Usage

Simply install the package from Nuget and it will instantly kick in; there's no configuration required so go and get it now.

As ever the source code can be found here.

Cheers M'dears!

Cruncher v3

Sun, 30 Nov 2014 03:17:44 Z

No More `Ctrl-F5`

Last night at a ridiculous hour I released the latest version of my asset preprocessor for .NET

Cruncher is a cool bit of kit. It makes optimizing your resources easy. It can bundle unlimited combinations of remote and local CSS, Less, Sass, JavaScript, and CoffeeScript files. Like really... Mix and match them anyway you like and Cruncher will preprocess them accordingly and produce links to the processed output.

Cruncher can handle nested CSS @import statements, re-maps relative resource urls and has a self cleaning cache should any changes be made to any of the referenced files. It can also parse CSS and add vendor prefixes to rules by Can I Use using AutoPrefixer.

You can, and most definitely should get it here

How it works

When processing a collection of inputs, Cruncher will identify the content type and apply the correct preprocessor to the input converting it to CSS or JavaScript accordingly. CSS files are then passed through an AutoPrefixer postprocessor if it is enabled (By default it is). It will then, if you are running in release mode minify the output using the Microsoft Ajax Minifier

Finally links are produced in the page as follows.

<link rel="stylesheet" href="/assets-cruncher/-1287271604.css">
<script type="text/javascript" src="/assets-cruncher/-1661000378.js"></script>

Where the name is the hash of the combined output. This allows the native static file handler to take over which is great for performance (though all this activity is also heavily cached both in the browser and the server). If any changes are detected by file monitors for each file and imported files then the number will change which forces the browser to request the updated output. That allows instant propagation of changes made to the input files. No More Ctrl-F5!

Usage

It really couldn't be easier. Simply add @using Cruncher to your view and use the following methods to add resources. This all works in webforms syntax also.

// Default.
@CruncherBundler.RenderCSS("style.css", "style.less", "style.scss")

// Render the link wth a media query.
@CruncherBundler.RenderCSS(new HtmlString("media=\"(max-width: 800px)\""), "style.css", "style.less", "style.scss")

// Default.
@CruncherBundler.RenderJavaScript("jquery-2.1.1", "test.coffee", "test.js")

// Render the script with the 'async' boolean enabled.
@CruncherBundler.RenderJavaScript(JavaScriptLoadBehaviour.Async, "jquery-2.1.1", "test.coffee", "test.js")

// Render the script with the 'defer' boolean enabled.
@CruncherBundler.RenderJavaScript(JavaScriptLoadBehaviour.Defer, "jquery-2.1.1", "test.coffee", "test.js")

There's a great writeup of the async and defer attributes here

Feel free to have a good look through the sourcecode. It's all, as ever, open source under the Apache 2.0 license and contributions are most welcome.

Thanks

I'd very much like to thank both Alain (I'm so sorry I have forgotten your surname) for providing some simply awesome ideas and code and Jeroen Breuer for reporting bugs and providing me with projects to tests against for this release. You both got me revisiting code I'd long forgotten about and didn't realise anyone was using.

ImageProcessor.Web 4.1.0 Released!

Wed, 12 Nov 2014 06:14:43 Z

Following yesterdays post charting the updates in the the core ImageProcessor library I'm going to take the time to chart the updates in the new 4.1.0 release of ImageProcessor.Web

New Stuff

Methods

All the new methods available to ImageProcessor are available to ImageProcessor.Web.

Pixelate
DetectEdges
EntropyCrop
Mask
Overlay

Syntactically they are invoked using familiar rules similar to preexisting methods.

For example.

http://your-image?detectedges=prewitt&greyscale=false

Will produce an image with a Prewitt operator applied that also retains the original image colours.

Original

Processed

Swish!

Handling Images in Instructions

Two of the new methods: Mask & Overlay accept images as parameters in part of their instruction sets. Rather than passing the entire path to the url (which would open up all sorts of security issues) you set the image name only as a parameter. These are mapped to two preconfigured locations.

Mask- ~/images/imageprocessor/mask/
Overlay - ~/images/imageprocessor/overlay/

These can both be overwritten by installing the ImageProcessor.Web.Config package from Nuget and changing the settings in the processing.config file.

Here's the two of them in action.

Mask

http://your-image??mask=mask.png&mask.position=30,30&format=png

Original

Masked

Overlay

http://your-image?overlay=monster.png&overlay.position=30,30&overlay.size=100,100&overlay.opacity=80

Original

Overlay Applied

Moar New Stuff

IImageService

With this version comes a new system for supplying ImageProcessor.Web images to process; IImageService.

The IImageService interface defines methods and properties which allow developers to extend ImageProcessor.Web to retrieve images from alternate locations to process. Think pulling images from from a SqlServer filestream or from another custom service.

Creating a new service simply requires implementing the interface to supply a prefix and a byte array.

The interface looks like this.

/// <summary>
///  Defines properties and methods for allowing retrieval of image from different sources.
/// </summary>
public interface IImageService
{
    /// <summary>
    /// Gets or sets the prefix for the given implementation.
    /// <remarks>
    /// This value is used as a prefix for any image requests that should use this service.
    /// </remarks>
    /// </summary>
    string Prefix { get; set; }
    /// <summary>
    /// Gets a value indicating whether the image service requests files from
    /// the locally based file system.
    /// </summary>
    bool IsFileLocalService { get; }
    /// <summary>
    /// Gets or sets any additional settings required by the service.
    /// </summary>
    Dictionary<string, string> Settings { get; set; }
    /// <summary>
    /// Gets or sets the white list of <see cref="System.Uri" />. 
    /// </summary>
    Uri[] WhiteList { get; set; }
    /// <summary>
    /// Gets a value indicating whether the current request passes sanitizing rules.
    /// </summary>
    /// <param name="path">
    /// The image path.
    /// </param>
    /// <returns>
    /// <c>True</c> if the request is valid; otherwise, <c>False</c>.
    /// </returns>
    bool IsValidRequest(string path);
    /// <summary>
    /// Gets the image using the given identifier.
    /// </summary>
    /// <param name="id">
    /// The value identifying the image to fetch.
    /// </param>
    /// <returns>
    /// The <see cref="System.Byte" /> array containing the image data.
    /// </returns>
    Task<byte[]> GetImage(object id);
}

Both the local and remote image service implement this interface. View the source code to see examples.

Extras

With this release I upped the cache to hold 100 images per folder. This now increases the theoretical cache limit to 409,600,000,000 images though I don't think anyone will be hitting that kind of limit any time soon.

There's a few performance improvements thrown in also that will make things snappier than ever.

In Summary

I'm pleased with this release and the benefits it offers. There's only a few feature I think that ImageProcessor.Web is missing (Face detection being one) so I hope you are enjoying using it as much as I do building it.

ImageProcessor 2.1.0 Released!

Tue, 11 Nov 2014 07:14:07 Z

Today marks the release of the latest version of ImageProcessor My super, fantastic open source imaging library.

This is a pretty big release with a multitude of new functionality, performance improvements and bug fixes. I'll run through some of them here and try not to ramble on too much in the process. It's gonna be very image heavy so I recommend a broadband connection.

New Stuff

Pixelate

This new method allows you to pixelate an image by passing a pixel size to the ImageFactory in the following format.

public ImageFactory Pixelate(int pixelSize, Rectangle? rectangle = null)

If a rectangle is passed that will constrain the method to only pixelate a portion of the original image.

Original

Pixelated

Cool eh?

DetectEdges

This method allows you to detect points within an image where the brightness changes sharply. There's lots of different algorithms available to do this using some pretty wild maths see Wikipedia.

The method is called as follows.

public ImageFactory DetectEdges(IEdgeFilter filter, bool greyscale = true)

I've added 9 different detection methods to get started with.

KayyaliEdgeFilter
KirschEdgeFilter
Laplacian3X3EdgeFilter
Laplacian5X5EdgeFilter
LaplacianOfGaussianEdgeFilter
PrewittEdgeFilter
RobertsCrossEdgeFilter
ScharrEdgeFilter
SobelEdgeFilter

Here an example of it in action using the PrewittEdgeFilter

Original

Edges Detected

Edges Detected - Keeping Original Colours

Edge detection is one of the fundamental tools of image processing. I use it internally for this method.

EntropyCrop

This one I built for my good friend Jeavon Leopold who preyed upon by inability to resist a challenge. It looks for the area of highest entropy within an image and crops around it. It works particularly well with images containing large areas of a single color or similar colors around the edges.

public ImageFactory EntropyCrop(byte threshold = 128)

Original

Cropped to Area of Highest Entropy

There's three other new methods added to the Imagefactory class but I'll just link to the docs as I don't want to go on.

Moar New Stuff

In this release I've also managed to add a shiny new quantizer based on a vastly improved version of nQuant. This dramatically improves the output of indexed png files. Considering these images contain only 256 colors the output is extraordinary!

Original

Indexed PNG

Performance

Performance under the hood has been vastly improved. Using a combination of Parallelisation techniques and a new FastBitmap class I was able to improve methods such as GaussianBlur by up to 7X which was very pleasing. Every single method that could be has been rewritten to take advantage of the new techniques which has made ImageProcessor purr like a wolverine.

I've also been testing continuously to ensure that memory usage is kept consistently low - I'm very pleased with the results.

Bug Fixes

Version 2.1 now correctly handles images of different resolutions. In some circumstances it was possible to throw certain combinations of methods off like Resize and Rotate for example by passing them an image of a higher resolution than the default 96dpi. This has now been fixed.

I've also fixed a timing ( rounding error) issue within animated gifs and an encoding one which was making them impossible to share on Twitter. You can now share them anywhere you like.

On that note I bet you didn't realise that all the methods can be applied to animated gifs did you?

Anyhoo

I hope this has got you all excited and you find it useful.

This release has been a LOT of hard work and as ever if you think you can help in anyway then please do. The .NET community needs a tool like this and I can only keep supporting and improving it with your help to please Get Involved.

You Can Win!

Mon, 27 Oct 2014 12:06:11 Z

This is a post I'd like to share for Geek Mental Help Week in the hope that someone out there would find it helpful.

I am very, very, lucky to be alive and I appreciate that fact every day.

When I was about 24 something went wrong and I broke. I've no idea what the cause was, probably a multitude of things but I went, in what seemed to be a very short time, from being a confident, strong, happy guy to a complete wreck who wanted nothing more than to spare everyone the misery of being around me.

In the following four and a half years I inflicted a multitude of horrible acts upon myself.

I have:

Slit my wrists
Tried to hang myself,
Taken multiple overdoses
Starved myself
Jumped out of a 3rd storey window
Burned myself with an iron
Tried to bleed myself out with a drip.

I distinctly remember lying in a hospital bed crying, throwing up over and over in reaction to Acetylcysteine (used in the treatment of Paracetamol overdose), and begging for a nurse to let me die. I remember the single bloody-mindedness of slicing into my wrist with a Stanley knife despite the incredible pain. I remember the unpleasant sluggishness brought on as a side effect of the multiple medications I was on, and I remember waking up wishing I hadn't.

It wasn't a pleasant time in my life.

I was utterly convinced that I was a burden upon those around me, despite the constant care and love I received. My family and friends were incredibly supportive. In my head I had no discernible skills, no future and was a total waste of time and oxygen.

And then I discovered writing code...

I’d grown up with code around me. My dad used to make text adventure games for the Commodore 64 in his spare time, we always had a computer or five lying around but I only ever played games and did couple of very poorly taught lessons in Basic at school. I had no idea how awesome writing code could be.

It’s the raw unadulterated logic of it all. Life has an unfortunate way of throwing up unsolvable problems at you. Work, money, relationships, so many things can go wrong without reasonable answers but code creates solutions. Sure there’s quirks in every language but they are reasoned or a consequence of poor design. It still all boils down to logic and I love logic. I love the little victories, the fist-pumps, and the immediate visible result of your work.

I was backpacking around Australia in 2008 in a vain attempt to run away from everything when I decided to build a website for people doing the Harvest trail. I’d had very limited success finding farms that weren't intent on exploiting workers and I wanted to help other travellers avoid the bad places and reward the good - The government website was truly awful and I thought I could do better. I didn't have clue how to go about it but as soon as I read the first coding article online I was hooked, I read and absorbed everything I could get my hands upon and couldn't put my laptop down for months. It was amazing and made me feel like I was finally doing something important and useful.

It was a total disaster. Almost impressively slow and clunky and nobody wanted to use it but I genuinely didn't care. (I’d love to have another go at it sometime, maybe when I finally move back out that way). I had found my vocation. I had and have a million other ideas and I want to code them all.

Writing code gave me the focus I need to rebuild myself. It gave me the desperate breathing space my brain needed to let me re-evaluate everything sensibly and set myself firmly on the road to recovery. Whenever I needed a break from the world around me I could always depend on a few hours problem solving to set me back on the right path. With that new-found focus I spoke to doctors and counsellors, I read self-help material, took my medication, I was more honest with my friends and family and I took great care to look after myself.

I got myself a job within a year and have worked hard to make a name for myself, giving back to the community whenever I can through my open source projects. Hopefully I've helped you, the reader, in some small way through writing this.

It’s not all been sunshine and rainbows. I've had setbacks, some of them very major but I've always been able to fight back and found myself stronger as a result. I can be a grumpy shit at times but I've always had my code to turn to in times of trouble.

I’ve not needed medication for almost three years now. I feel pretty much spectacularly awesome 99.99% of the time. I’ve rediscovered a very childlike joy in the simple things in life and I recommend to anyone and everyone to try and do the same. When I look back at the incidences of my past it feels like another lifetime.

I honestly believe that the programmers are particularly prone to depression because we seek logical solutions in things that we cannot possibly control. The particular gifts we have that allow us to successfully solve difficult computational problems are our Achilles heel - We look for answers when there are none and beat ourselves up when we fail.

My success in battling depression has been due to the ability to separate those types of problems. I guess it helped that I came to programming so late and I was immediately able to see the difference.

If I have any advice to give is that you should try to do the same. Enjoy the little victories, don’t sweat in unwinnable situations. As long as you are trying, you are winning and nothing can take that away from you.

On Why I built a Responsive Framework

Tue, 02 Sep 2014 21:23:00 Z

Why?

One of the things a work on in my spare time is a responsive framework. You might have already seen it.

A few people have asked my why I built it, as there's already several popular frameworks out there. There's one answer I give every time:

Because I needed it.

Complexity

The other, sadly more popular frameworks, are great pieces of work. A lot of effort has gone into building and testing them and they do a pretty good job for the most part. They all have the same problem though - They're all too design opinionated.

If I'm building a website the last thing I need to do is overwrite styles that have already been added by the base stylesheet. Every single change that you have to perform introduces greater opportunity for error and adds weight to the websites resources. Each change also introduces complexity and makes a website more difficult to maintain.

That's the last thing I need when I'm working with a tight deadline hanging over me.

Avoiding the issue of opinionated design has been paramount in the development of Responsive. Every bit of CSS has been coded specifically not to force excessive styles on the developer. Only the required code is present to provide the functionality to build a cross-browser responsive experience

Accessibility

Another issue that isn't handled properly with other frameworks is accessibility. There's been meagre attempt to remedy this from other frameworks but for the most part they are a mess. I needed something that would handle the greater bulk of accessibility requirements without the developer having to do anything additional. As a result, every JavaScript component within Responsive handles the creation and manipulation of ARIA attribution to ensure that its behaviour is accessible to screen readers.

Internationalisation

None of the frameworks that I am aware of have support for right-to-left languages built in. Developers shouldn't have to jump through hoops to do this. Grids, floated and positioned elements should switch, touchable components should reverse their behaviour, and directional keyboard events should reverse their behaviour all with the minimum of change required by the developer. Responsive allows you to switch this by adding the attribute dir="rtl" to the html element*

In Summary

By now you should see why I created the framework and why both you and I should be developing our websites both responsive and fixed with Responsive. Web development has never been more complicated, we're trying to do so much more with less time and more devices than ever before and we need the best setup possible to ensure that we can build performant, flexible, accessible sites. So give it a go, you'll be surprised at how much there is to offer.

* There has been conversation with other developers based on an outdated information in this article that states that we should not do this as it reverses the position of the scrollbar in certain obsolete browsers. Instead, we should hack the document by adding a child element to the body setting the attribute on that. In my humble opinion that is ass-backwards (pun intended) If there is a browser bug in any of the non-obsolete browsers report it, don't hack around it.

Image Processing for Everybody!

Wed, 27 Aug 2014 02:51:45 Z

Happy ImageProcessing Day!

Today marks the new release of my open source project ImageProcessor. I'm very proud of it.

Inspired by the frantic codings of the brilliant people I met at this years Umbraco CodeGarden retreat this release has turned into an almost complete rewrite of the library. I've dramatically simplified the code required to write plugins whilst making the library much more robust and modular adding a few very cool (I think so anyway) features.

We now have the following:

ImageProcessor

Automatic image file type detection
Automatic plugin detection
Ability to extend image file type support via the ISupportedImageFormat interface
Ability to extend individual processors via the IGraphicsProcessor interface
Methods to load embedded native (unmanaged) libraries from within plugins
True separation of concerns from the .Web extension.
More specific error handling feedback

ImageProcessor.Web

Automatic plugin detection
Ability to extend individual processors via the IWebGraphicsProcessor interface
Improved and more consistent parsing syntax.
Improved processing and caching performance
More images are now cached (theoretically 409,600,000,000)
Post processing events to tap into. ImageProcessingModule.OnPostProcessing
Improved error handling for remote image requests
Url configurable EXIF preservation

There's more but it's probably best for you to read the documentation. As ever, it's a work in progress but I've tried to make them readable and precise. If you want to help at any point to improve the library, there is always a good place to start.

I'd really like to thank Scott Hanselman for sharing the library on his blog and the Umbraco team and community for their continuing support and faith in my ability. You guys absolutely rock! #h5yr's and approving nods all round!

Filepath too long?

Tue, 05 Aug 2014 13:57:28 Z

I thought I'd write this post as a reminder to myself and as a helper for anyone daft enough to try to use Node on a Windows machine.

Node has a mental system for managing packages which involves deeply nesting dependencies in the node_modules folder. This can lead to all sorts of problems on Windows machines like making the --watch overload for Jekyll die on its ass.

You can't even delete the damn thing properly due to Windows path constraints. It's really annoying to say the least but at least they know about it

Here's a quick method I use to remove the folder when I need to.

Open a command prompt or whatever your shell tool of choice is, navigate to the parent folder of the node_modules folder and type in the following commands:

mkdir foo
robocopy foo node_modules /MIR
del foo
del node_modules

This command uses the robocopy utility and the /MIR "mirror" flag to mirror the empty foo directory to the node_modules folder emptying it out. You can then delete both directories.

Voilà :)

A Call To Arms

Sat, 26 Jul 2014 12:54:03 Z

The popularity of the Internet is the most important single development in the world of computing since the IBM PC was introduced in 1981.

Bill Gates was quoted as saying that. I'd go further.

I believe that the Internet is the single most important invention we have ever created.

With the Internet we can now universally share information like never before. We can pool resources to solve problems, provide education resources for each other and future generations, and provide support and services (sometimes lifesaving) for almost all our needs. It has revolutionised almost every aspect of our interaction as a species with billions of people now having access to the largest, free, information portal that has ever been created.

The internet is a Good Thing ™

I am a web developer. I imagine that you, reading this are one also. As such we possess a unique and special set of skills that allow us to create software to expand upon and improve the Internet. I believe that as developers we have an obligation, I would say a privileged one, to ensure that every single piece of work we produce is delivered to the highest possible standard

To do that requires effort on our part. It requires dedication, passion, craftsmanship, and an attention to detail.

At present I don't believe as a profession we do this. I won't go into specific technical details with this post but I will list some of the common mistakes I see professionals make on a daily basis.

Multiple blocking requests of unminified resources in the head of the document.
Incorrect use of elements rendering websites inaccessible.
Sporadic, in-line JavaScript and CSS.
Unoptimized, massive image requests increasing page weight.

This is bread and butter stuff, day one stuff and we really should do better.

So here is my challenge to you: Every time you release a piece of work, ask yourself whether it is the best that you can do. Is it fast, lightweight? Is it accessible? Have you followed the defined standards? Have you tested it?

If you haven't, you are doing not only yourself a disservice but also one to the people who consume your work, who depend on your work and you should question your fitness for such an important role.

Strong words I know but we have a duty of care.

James Jackson-South

Context based property mapping with UmbMapper

Mo Mapping, Mo Problems

The Problem

The Solution

Get it While it's Hot!

Strong Typed Umbraco Mapping with UmbMapper

Greetings and Salutations!

A Little History

Introducing UmbMapper

The Elevator Pitch

Configuration

In Summary

Update

When to use it?

ImageSharp.Web (My continued plans for world image dominance)

I better build this before someone else does!

Introducing ImageSharp.Web

The Pipeline

Behind the Curtain

IUriParser

IImageService

IImageCache

IImageWebProcessor

Commands

Rich Returns

Default Response

Cached Response

Gimme, Gimme, Gimme!

Wrangling The Microsoft MVP Activity Bookmarklet

The Problem

The Solution

Fixing the Source

Edge Management To The Rescue!

ImageProcessor Core

So its been a while...

A Little History

The Elevator Pitch

Example Time

Performance

So What's The Plan?

Want To Help?

Update

Mo Images Mo Processing

ImageProcessor

New Stuff

Resolution

Resize

Original Image

Padded Image With Hot Pink Background

Performance

Bug fixes

ImageProcessor.Web

New Stuff

PostProcessing

Bug fixes

So... What's Next?

Help Me To Help You

Fun with UmbracoVirtualNodeRouteHandler

Use Case

Example

Experiments with Umbraco's IContentService

A Confusing API

Magic Strings

Expression Trees to the Rescue!

Announcing ImageProcessor.Web.PostProcessor

The Nourishing Fruits of Boredom

How It Works

Usage

Cruncher v3

No More Ctrl-F5

How it works

Usage

Thanks

ImageProcessor.Web 4.1.0 Released!

New Stuff

Methods

Original

Processed

Handling Images in Instructions

No More `Ctrl-F5`