Keep Directory Structure When Uploading

2012
12
June
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

2012
23
March
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

2012
28
February
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: , , ,

CSS3 Background gradient on top of an image

2011
08
November
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

2011
25
October
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:

#DemoGradient{
    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;
    cursor:pointer;
    width: 150px;
    height: 100px;
}
#DemoGradient:Hover{
    background-position:100px;
}

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

2011
18
October
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.

Polygons

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

2011
16
October
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){
		console.debug(person);
	}

}).send();

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

2011
16
October
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:

Emails

    • 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.

 

Browsing

    • 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. :P

 

General

    • 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: