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 “”

var jsonRequest = new Request.JSONP({
	url: '',
	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:

Reduce iPhone Data Usage

8:46 pm

Okay, I recently found myself in a position where I had very, very limited bandwidth on my beloved iPhone. After moving to China 6 months ago with my newly upgraded to baseband 5.12.01 iPhone and living without it for 5 months waiting for OS4 and an unlock to be released, it finally came!

So off I pranced merrily to a China Mobile outlet to purchase a SIM card. But what data plan to get?
After much deliberation, I decided on a reasonable 200MB plan. Based on my “Fair use” policy when I was on O2.
3 days and 70MB later, it became apparent that this wasn’t going to do the job. (I DREAD to think of the atrocious things I must have done to my old fair use policy back home…)
Since I deemed upping the bandwidth both too expensive and too complicated with the vocabulary I had at my disposal, I resolved to simply reduce my data usage.

After a small amount of research and common sense, here are the steps I devised:


    • Reduce the number of email addresses configured to be downloaded by your phone to as few as possible. Ideally one.
    • Reduce the number of checks for mail to as few as possible. If you don’t often get emailed, you may even want to reduce them to one per day or disable them entirely.
    • Reduce the number of emails you receive.
      • 1.If you are subscribed to forums, configure them to send you daily or weekly digests.
      • 2.Disable all non-essential social networking notifications. (Or, if possible, configure them to also send daily digests as opposed to real time notifications)
      • 3.Use folders – With google mail, if I configure a filter to send a certain type of email to a certain folder, when retrieving my inbox messages, this will not be loaded! What I use this for social networking, folders for MySpace, Facebook, Ameba, etc.
    • 4.Disable images from being displayed in emails.



    • Disable images! I don’t think the iPhone supports this natively. But if your iPhone is jailbroken (And if you’re having bandwidth problems, it probably is), there is an excellent Cydia app called “imaSafari” which allows you to disable images from being loaded.
    • 2.If there are sites you regularly visit, make a point of checking to see if they don’t have a mobile version. (I was guilty back home of simply using the Meebo website as opposed to the app, purely because they work just as well. But naturally, this requires everything to be loaded every time)


Video Streaming

    • I’m going to have to go ahead and say “Just don’t do it”. If you’re at the point of optimizing your emails to reduce data usage, loading videos is just… Well, I feel I don’t need to explain this one. 😛



    • Avoid using things like google maps, which is obviously highly image intensive.
    • Connect to Wi-Fi wherever possible.
    • Dont send or receive images via IM, social networking, etc. if you can help it. (If you really want to share an image, wait until you have Wi-Fi access and upload any and all images you feel you may desire to share.
    • If you are using a laptop with a wired connection but you still have a Wi-Fi card, you can use it to set up a network for your iPhone to connect to. I wont go into the details here, but if you search google for “iPhone Adhoc Network” plus the name of your operating system, I’m sure you’ll find what you’re looking for.


More to come as I think of them!
Hope this helped.

Posted in: China, Design, Life
Tagged with: