This week I was trying to replicate "hyperlink" functionality using a ContentEditable area, rather than a <textarea>. Stupidly, I thought the process of finding a user's currently selected text and surrounding it with a link would be fairly easy... it turned out to be fairly tough.

My function would use the window.getSelection() to get the user's current selection, and then call getRangeAt(0).cloneRange() to create a copy of the "Range" object for that selection. The range object tells the browser where the selection starts and where the selection ends.

I would pull the selected text out into a string object by calling .toString() on the Range object itself. Then I could modify that string to include an <a> tag surrounding it, with the appropriate link. The next step was the most difficult to figure out, the process is as follows:

1. Create a new text node, using document.createTextNode and passing in the modified string.
2. Call "insertNode" on my range object, passing the text node as a parameter.
3. Call "removeAllRanges()" on the selection object, to remove any existing ranges.
4. Call "addRange" on the selection object, passing in my modified range object.

This resulted in the selected text being replaced with my linked version in every browser except... Firefox. Bit of a strange one, really, and Googling the issue didn't seem to shed much light. My next step is to find a Firefox friendly fallback for if the normal method fails.

Recently I’ve been collaborating on a blog engine with a designer (Simon) and back-end developer (Jason). Using Simon’s built WYSIWYG editor ( see previous post ) as a starting point we are aiming to create a user friendly blog that can be edited ‘on the fly’.

So the html5 attribute ‘contenteditable’ is fundamental in our development allowing us to avoid the use of form textareas to input text. This quick demo shows that by adding ‘contenteditable=”true” to the element the user can directly edit the text inside. Such an easy bit of work for a massive chunk of our editor.

Continuing on my journey of learning the in's and out's of HTML5's Canvas, I found myself needing to detect whether a point on my canvas was within the region of one of my multiple objects already drawn on the canvas.

At first I thought I was stuck with the only option of having to loop through each of the objects, calculating all of the co-ordinates that the object covers and then seeing if any of them tally up with another my point of interest. I hope that makes sense, it definitely took me a while to even come up with that solution. However, as I began down this route I thought there must be a better way, something I'm missing.

After some googling, I came across isPointInPath(), a function within the Canvas API which, in short, allows you to check if a co-ordinate (passed into the function) is within the current path being drawn. Perfect! The only issue is that I have been drawing my object's through the use of methods such as .drawRect() which, from what I could tell anyway, could not be used within a path. This therefore meant that I needed to redraw my object's.

In the code below, I check to see if a point is within the current path, and therefore change the colour of the object I am about to draw. This is it in it's simplest form, but you could use it to do alot more, especially when bringing mouse interactions into a Canvas piece.

You can also see though that I am drawing a 5x5 rectangle, starting at the co-ordinate I passed into the isPointInPath function. This means though that whilst the starting point is not in the path, another point within the rectangle could be. This leaves me the next challenge to see if I can check if any point within a path is within a point within another path. I do like to give myself challenges, don't I?

In the following demos, you can see an example of the above code in action; a point being within the path and another point being outside the path.

I thought I’d write a blog around a piece of interesting functionality I developed for a new blog engine that I am currently involved with.

The requirement was to take a flat list of posts and output a dynamic, magazine style layout with was broken down into multiple rows, with each row having a varying number of posts. This needed to be a random arrangement, so that each time the blog was visited, the layout would be different and make for a more interesting user experience.

This was going to be using MVC3, so the first step was to create a database table called BlogRow. This contained all of the row variations that existed within the system, the two most important columns being “ViewName” (which stored the name of the partial view instance for that particular row type) and “NumberOfPosts” (which stored the number of posts this row required to display).

When the page began rendering, you’d start with a flat list of 24 posts, retrieved in reverse chronological order from the database. Then you’d follow this process:

1. Get a random BlogRow instance from the database (where NumberOfPosts for that row is higher than the remaining posts in the flat list)
2. Slice the required NumberOfPosts out of the flat list (so slicing 4 would leave you with 20 in the flat list)
3. Create a model for that particular partial view, consisting of a List of Post objects and the name of the partial view for that Blog Row
4. This process continues until you have no posts remaining in the flat list of posts, at which post, a model which consists of a List of Lists of Posts (confusing, right?) is sent to the main View for the front of the blog

There were a couple of pieces of extra logic around this (for example, a row consisting of a single post is only used if there’s only one post left in the list at the end), but I won’t go into all of those now. The page also stored it’s layout in the user session, preventing the layout from changing constantly for a single user every time they refreshed the page.

I couldn’t find many instances of people using a dynamic number of Partial Views/Partial View Models within a single view, so it took a bit of planning to put something together, but I ended up with a pretty effective solution.

For a recent project I was required to create a scrollable map that also acted as a slideshow of content. I was pointed in the direction of an online script called dragdealer.js. On first view this seemed to have all the features I needed and would be easily customizable to the design I was working from.

So I started editing the markup to create my 3x4 grid but immediately hit a problem with my slides not scrolling to the coordinates I had set. With little explanation to the script online I eventually realized that I would need a grid of equal slides horizontally and vertically, so I reworked my coordinates. The drawback of this was I would have to use extra markup to create these empty slides.

So my code then looked like this; with steps being the number of slides horizontally/vertically.

var canvasMask = new Dragdealer('canvas', { x: 1, y: 0, vertical: true, steps: 5, loose: true });

var slideCoordinates = [[1, 0], [2, 0], [3, 0], [1, 1], [2, 1], [3, 1], [1, 2], [2, 2], [3, 3], [1, 3]];

However at this point my dragging functionality still wasn’t working correctly. After a lot of trial and error I worked out this formula.

x = x / (steps -1) & y = y /( steps-1)

So..

var canvasMask = new Dragdealer('canvas', { x: 0.25, y: 0, vertical: true, steps: 5, loose: true });

var slideCoordinates = [[0.25, 0], [0.5, 0], [0.75, 0], [0.25, 0.25], [0.5, 0.25], [0.75, 0.25], [0.25, 0.5], [0.5, 0.5], [0.75, 0.5], [0.25, 0.75]];

Take a look at my demo

For a long time now I have been impressed with the way the internet dealt a massive shake up to the music industry, firstly with file sharing (Napster etc) and secondly with subscription services that make music available at anytime on any device. The resultant winner in this technological advancement is a company that started life manufacturing PC's (with iTunes and the iPod/iPhone/iPad I am obviously refering to Apple).

Add to this the way the publishing industry has had to react to Amazon selling more books than anyone else. Following on from this Amazon created it's own device to deliver traditionally printed content via digital means (Kindle). Publishers of all kind have had to catch up by offering digital alternatives or in alot of cases, simply ignoring traditional print copies. Newspapers are a classic example - the requirement for news has increased yet sales of newspapers are in signifiacnt decline http://www.pressgazette.co.uk/section.asp?navcode=161. Luckily for newspapers and book publishers they have easily made the switch to digital: The Guardian website is massively successful; News International introduced the paywall to overcome the drop in revenue from print; digital copies of books are sold in large amounts and probably at much larger profit margins.

These transitions have been slow, bogged down in legal and technological barriers. No doubt there will be other shifts and trends, but can you now imagine an internet without music and news. Nope - nor me.

This article on The Guardian website Traditional TV has survived the net threat, but for how much longer? got me thinking. Several years ago I dumped my TV, in fact it was the day after watching the 2003 Eurovision. At that point in time I had broadband, but it was only yesterday (15th January 2012) that I subscribed to a digital 'TV' station (Netflix). In the years in between these two events the gadgets I have available are siginifiacntly more advanced (Xbox, WiFi, DAB, SmartPhone) but my PC and OS is only marginally better. Whilst my broadband has only increased from 2MBs to 8MBs.

So how come it's taken so long for paid for digital TV to come to my household (music and news have for years)? Well there are a few reasons - it all revolves around content, iPlayer only has content availble for the last 30 days, 4OD I find buggy and full of advertising. I could of subscribed to Sky and watched via the Xbox or PC, but again the content is full of ads - and I am not going to pay someone to show me advertising. FilmFour/LoveFilm are worth mentioning - but previously subscriptions have come with limitations.

For the next generation of content users (who have grown up with free content on YouTube etc) the internet still doesn't fulfil their needs. There is still no way for producers to make their content available as and when they wish.

Netflix is a step in the right direction and is an interesting model and probably the one model that I believe to contain the correct offering. It needs to grow and increase it's content variety and availability, but could it represent the begining of the end for traditional TV.........

TV represents the last of the big media elements to be digitalised. This progress won't be halted through legal barriers. There are no technical barriers. The industry needs to realise that it has to change or it will lose out. Tick tock guys, tick tock.

You may have heard that Ofcom want the UK to have access to 4G across the board, but what does this actually mean?

In a nutshell

4G is short for fourth generation. It will allow mobile phones to get faster internet connections, but to implement it the mobile networks need more spectrum (think of how a radio station broadcasts on a particular frequency). Ofcom are going to auction off some spectrum for 4G use, but after legal challenges to their initial plan they will no longer be reserving any for Three or Everything Everywhere who will now have to fight it out with the others.

The release of the 4G spectrum is crucial to the growth of mobile data, which is forecast to increase 500pc in Western Europe over the next five years. 

Pro's

- Access to speedier mobile web 

- Increase competition between mobile networks, bringing a better deal to consumers

- Faster access in rural areas 

Con's

- As no network offers unlimited allowance for smartphones it is likely that the cheaper option of 500gb will go out the window

- The 4G network is already last years thang, Trailblazers in the US and Europe are already looking for the next best think and the UK is falling behind

The final decision will be made in the summer, but as the government are already prepared to offer £150bn for the project the auction is likely to go ahead.