Honours Project: Hang on

3:22 am

Following my initial ideas i have been doing more research into each of my plans. The more I think about it the more I’m beginning to shy away from my initial primary concept of a streaming video service. The challenges in this project are primarily technical and while the overall social implications of the project are interesting, I’m beginning to think it’s not the direction I want to be taking my research this year.

My reasons for changing aren’t all negatives on the creative streaming side of things. The more thought I put into the ways people share and learn from one another, the more interesting and multifaceted I’m finding the idea of collaborative coding to be. I’ve always found the best learning tool for coding is other people’s code itself, even when undocumented. And in some cases, especially when it’s undocumented. This got me thinking about the services currently available for viewing other people’s code. There is, of course, a plethora of services hosting freely available code to view, use and modify. The thing about these services is that they (Excluding for now tutorial posts/articles) suffer from a lack of searchability. Codepen and jsfiddle are exemplary websites which make sharing small snippets of code incredibly easy but are designed as a means to that end – being an ad hoc service to forums, social networks and Q&A sites such as Stackoverflow rather than being standalone.

Posted in: Honours Project
Tagged with: ,

Personal Honours Project Introduction

2:58 am

The first day was spent going through the introduction to the module and going through some exercises to get us back into the way of it. We then did some brainstorming ideas for our personal honours project research.

We were provided with worksheets to help identify our own ambitions and passions which really helped to guide the direction of the brainstorming to ideas that would be compelling and interesting. I’m looking into building an application that will help people improve their skills and help others build on theirs too.

Currently, this aim revolves around two decidedly different applications but with the same strong theme of communal learning.

Continue reading

Posted in: Honours Project
Tagged with: , ,

Keep Directory Structure When Uploading

1:18 pm

So lately I’ve been playing around a lot with the new File API and some image manipulation etc. in javascript and am having tremendous fun doing so!
I’ve seen many people asking about folder uploading, which is an exciting new development. The problem most people seem to be having is with retaining file structures when uploading folders.

It is possible to retain the structure of folders during uploading. At the point of writing, I have been unable to find an equivalent for browsers that do not use webkit.
This post is for TESTING ONLY.

Continue reading

Posted in: Development
Tagged with: , , ,

Paste Image From Clipboard With Javascript and MooTools

12:13 pm

Images and text can be loaded from the user’s clipboard. For this example we will be focusing on loading an image from the clipboard.

Please note, this is for loading image data (i.e. right clicking an image within the browser and selecting copy, or taking a screenshot (to clipboard)) and not for loading copied files. (i.e. copying from the desktop) – That is stored in an entirely different place.

Continue reading

Posted in: Development
Tagged with:

Simple flex-box demo

1:37 pm

I constantly find myself nipping onto google for a quick little flex box demo because I still haven’t memorized what’s required. Since it always takes me a couple of minutes, I figured I’d pop one on here.

Continue reading

Posted in: Design
Tagged with: , , ,

HTML5 Upload Folder With Webkitdirectory

7:38 pm

Something that I have always found myself lusting after is the ability to just drag and drop folders into a web app to upload them. So uploading multiple files was an awesome improvement and great fun to play with.

But now, I present to you, webkitdirectory!

HTML5 Folder Upload with webkitdirectory from Alan Layt on Vimeo.

This will only run on an up-to-date webkit browser. webkitdirectory is currently non-standard is is purely for playing with. I do not advise you deploy this in a live application.

I have expanded on folder upload in my Keep Directory Structure When Uploading post.

I had the pleasure of having a little play around with this when I should have probably been working with processing for university but I do like to procrastinate.

So, without further ado;


<input type="file" name="file_input[]" id="file_input" multiple webkitdirectory="">

Simple, right?

Indeed it is! On to the PHP.

The PHP!

	$uploads = UpFilesTOObj($_FILES['file_input']);
	$fileUploader=new FileUploader($uploads);

class FileUploader{
	public function __construct($uploads,$uploadDir='uploads/'){
		foreach($uploads as $current)
				echo "Successfully uploaded ".$current->name."\n";
	public function upload($current,$uploadFile){
		return true;

function UpFilesTOObj($fileArr){
	foreach($fileArr['name'] as $keyee => $info)
	return $uploads;

function get_file_extension($file_name)
  return substr(strrchr($file_name,'.'),1);

I’ve also been working on a MooTools script to upload the file asynchronously. So stay tuned.

Any comments or suggestions and I’d be delighted to hear them!

Good luck.

Posted in: Design

CSS3 Background gradient on top of an image

1:52 pm

In CSS3, it is possible to place a background image beneath a transparent gradient.

This is achieved simply by including multiple statements within the background property.

However, CSS reads from the right to the left, so the property at the end of the list will display on top.
So, we include the background image last to have it appear behind the gradient:

background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 90%),
url('http://IMAGEURL.jpg') repeat;
Posted in: Design
Tagged with:

CSS3 gradient transition with background-position

7:42 am

Although you can’t directly animate gradients using the CSS transition property, it is possible to animate the background-position property to achieve a simple gradient animation:

The code for this is dead simple:

    background: -webkit-linear-gradient(#C7D3DC,#5B798E);
    background: -moz-linear-gradient(#C7D3DC,#5B798E);
    background: -o-linear-gradient(#C7D3DC,#5B798E);
    background: linear-gradient(#C7D3DC,#5B798E);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    background-size:1px 200px;
    border-radius: 10px;
    border: 1px solid #839DB0;
    width: 150px;
    height: 100px;
<div id="DemoGradient"></div>

If you have any questions, feel free to comment and ask!
I always appreciate a challenge.

Posted in: Design
Tagged with: , , ,

CSS3 -wrap-shape and polygons

12:11 am

Recently, whilst stuck in procrastination limbo from university work, I found myself playing around with Adobe’s proposed CSS Regions Prototype, which you may or may not have heard of.  The purpose behind this prototype, is to allow developers to give websites a more enhanced look and take on an aesthetic more and more like that of a magazine or news paper. With the increasingly wide-spread usage of CSS3, this is already beginning to happen and personally I would love for these additions to go through.

Due to the fact that this spec is not currently approved and therefore not in any (At present, to my knowledge) of the main browsers, you will need to download the demo from the Adobe Labs, as linked above.

While -wrap-shape allows usage of “Circle” and some others (Spec here), as usual, I found myself inclined to jump in at the deep and end attempt what I’d been looking into doing when I stumbled upon the attribute.


So, the first issue I had to tackle (Having used them for the first time during uni work a few days prior without much luck) was polygons, which are defined with an array of coordinates. x and y are separated by commas and points by space, which I found slightly counter-intuitive, but easy enough to get used to.

For instance, the following code would produce a small 150x150px square of text:

-webkit-wrap-shape:  polygon(0px, 0px 150px,0px 150px,150px 0px,150px);

And the following would produce a small diamond:

-webkit-wrap-shape:  polygon(100px, 0px 200px, 100px 100px,200px 0px,100px);

After a little tinkering, I was able to generate a rough demo of the effect I was going for:

You can download the source from the following link: simple_shape_modified

Posted in: Design
Tagged with:

Get Facebook user info with Mootools

8:55 pm

Recently I found myself in need of a way for users to use their facebook details in a web app, and to link back to their facebook profile.

Anyway, I decided to put together a very basic demo to show how to retrieve a user’s data using Mootools!

Luckily, Facebook make this extremely easy by means of their Graph API!

This process is as simple as making a JSONP request to “http://graph.facebook.com/#USERNAME#”

var jsonRequest = new Request.JSONP({
	url: 'http://graph.facebook.com/Sapphion',
	onSuccess: function(person){


The simple request shown above would retrieve basic information from my own Facebook profile and output it to the browser’s console.
You can view a demo here.

Posted in: Design
Tagged with: