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.
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.
Note:
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.
Update:
I have expanded on folder upload in my Keep Directory Structure When Uploading post.
Enjoy!
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.
if($_FILES['file_input']){
$uploads = UpFilesTOObj($_FILES['file_input']);
$fileUploader=new FileUploader($uploads);
}
class FileUploader{
public function __construct($uploads,$uploadDir='uploads/'){
foreach($uploads as $current)
{
$this->uploadFile=$uploadDir.$current->name.".".get_file_extension($current->name);
if($this->upload($current,$this->uploadFile)){
echo "Successfully uploaded ".$current->name."n";
}
}
}
public function upload($current,$uploadFile){
if(move_uploaded_file($current->tmp_name,$uploadFile)){
return true;
}
}
}
function UpFilesTOObj($fileArr){
foreach($fileArr['name'] as $keyee => $info)
{
$uploads[$keyee]->name=$fileArr['name'][$keyee];
$uploads[$keyee]->type=$fileArr['type'][$keyee];
$uploads[$keyee]->tmp_name=$fileArr['tmp_name'][$keyee];
$uploads[$keyee]->error=$fileArr['error'][$keyee];
}
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.
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;
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;
}
<div id="DemoGradient"></div>
If you have any questions, feel free to comment and ask!
I always appreciate a challenge.
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
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.
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
Browsing
Video Streaming
General
More to come as I think of them!
Hope this helped.
Animation – Is That A Fish In Your Ear? – David Bellos from Penguin Books on Vimeo.
Something I seriously need to put my hands on. Not to mention re-read Hitchhiker’s Guide to the Galaxy.