Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts
Wednesday, September 26, 2012
Goodbye Galaxy Nexus, Hello iPhone 5
Goodbye Galaxy Nexus, Hello iPhone 5.
I'm about to retire my GNexus to secondary status and I'm glad to.
The phone has been a terrible mess from day one. I was mistaken to believe a "Nexus" product would get updates and fixes but Verizon pretty much screwed the whole thing up from day one.
I got the official Jelly Bean the other day and it hasn't fix anything. I still get 3-4 hour battery life and most of the core apps don't work for me. I know this is Verizon's fault because I've played with other VZW Nexus phones with rooted ROMS and they perform much better than stock VZW. Jelly Bean still lags on Verizon GNEX phones. The camera app on Jelly Bean on VZW is atrocious compared to other GNEX phones with different roms.
Unfortunately, as a manager, I need to set a good example and I simply just can't root and experiment with an employer issued phone.
I'm back with the iPhone and I'm happy. I love the great apps that help me get my work done. iSSH, Screens (VNC/Apple Remote Desktop), Texstatic, various superior MySQL clients, and X11 apps.
PUSH IMAP w/ IDLE works with Cyrus/PostFix/Dovecot mail servers along with MD5-CRAM SSL authentication works on the iPhone. I don't use GMAIL so I need to make sure my PUSH emails from Nagios is working 100%. CalDAV with PUSH notifications and event .ics calendars work out of the box with iOS. More importantly, Cisco VPN w/ Group Authentication works since day one. Google still hasn't really figured out how to fix this and a smartphone is useless to me if I can't VPN/SSH into my work.
Lastly, the most important thing is MTP. MTP works 5% of the time. 95% of the time is is pure frustration. The GNEX has been a pain to transfer files. I've been using webdav, samba, ftp to get files into my Nexus. MTP client on Mountain Lion broke in 10.8.1. I can't get MTP working reliably with Ubuntu 12.04, CentOS or Linux Mint. I'll get it working but something will break it like an update to GMTP or Fuse. PPTP is really slow and web/ftp/sftp isn't going to cut it. I've tried various PPAs, FSTAB, manually mounting and it will work for a bit and then drop. When I plug in my Galaxy Tablet, it goes kaput again. Even when it does work, it never worked reliably. Files take forever to transfer and often get corrupted.
iOS 6 and the iPhone 5 mounts on Linux with no hassle. In fact, with a clean install of Linux Mint 13, I didn't have to do anything but plug in the cable. The App folders mounted and I could copy my files. I transferred about 20GB of MKV, WMV videos to the various video player apps I have. Large PDFs (120-300MB) and 60MB Excel files transfer without a hiccup. As you can see below, Linux Mint has no problems mounting an iPhone 5.
Lot of Android fans will tell you they will deal with all these frustrations because of the customization and flexibility of Android. I don't change home launchers, add widgets, apply different skins on my phones. Both my phones, I can play MKV and different video codecs, mount network volumes, run emulators and do pretty much the same thing. I do like the fact you can completely swap out a ROM distros. There are also some killer applications on Android that I like like Torque (iOS equivalent is pretty pricey). You can also run chroot Linux but I have never been a fan of the implementation on Android.
I have a different set of needs in terms of customization. For me, customization is the ability to install a great app like Vmware Vsphere client to manage my ESXI server. Customization is the ability to pull a sd card from my new Olympus OM-D micro 4/3 camera and edit 1080p video of my vacation. iMovie is truly amazing and has changed how I edit my home videos. I no longer need to use Final Cut for simple things like a picnic or music recital. Customization is also the ability to sort out my pictures in my picture album without manually renaming my jpegs 1.jpg,2.jpg,3.jpg just to have them display in a certain order. It is the little things I appreciate. There is still no peer to the iPod player on the iPhone.
The iPhone 5 is really fast. At work, we are developing a spreadsheet HTML5 web application that is javascript/ajax heavy and the iPhone 5 loads up the application with no problem.
The various Android devices we have have been choking on these pages (200 plus divs with over 100 concurrent ajax calls). The benchmarks (Anandtech) have shown iOS6 and the A6 SoC has a super fast Javascript engine. I'm surprised because Google's V8 has always been better than Apple's Nitro Javascript engine.
The GNEX still has a better screen but the apps I've used haven't taken advantage of it. I don't watch movies or surf the web on my phones so the larger screen is lost on me. I do, however, run a lot of terminal connections and I still prefer apps like iSSH over Connectbot. iSSH has transparent keys, touch sensitive gestures to pull up control and function keys. This level of usability even on a smaller display trumps the larger 4.65" screen.
I won't be ditching Android. I'll see if I can lemon my Nexus for S3. But for now, I am loving the iPhone 5.
Labels:
Android,
Galaxy Nexus,
iOS,
iPhone,
iPhone 5,
Javascript,
Jelly Bean,
Samsung
Thursday, May 24, 2012
JQUERY AJAX style upload with callback
By now, you have probably seen websites with "AJAX" style upload. Technically many of them are not really AJAX. XMLHttpRequest (AJAX) upload is not technically possible due to security limitations of Javascript. However, we still call them AJAX uploaders because they act and feel like it to the end-user; meaning the web pages are posting files without refreshing.
So where are the "AJAX uploaders?"
Many of them are actually SWF (Flash based) uploaders billed as "jquery file upload plugins." I'm sure many of them work great but I prefer to avoid Flash as much as possible.
There are also HTML5 support in some new browsers for asynchronous file uploads via AJAX post but I've had problems with some browsers like Safari and problems with different file types.
Today, I will show you how to simulate an AJAX upload without the use of Flash. If you have done some googling, the most common way to do it is to use a hidden iframe. This is considered a hack but it works. There are some tutorials out there but mine will show you how to get a callback from your upload script using Jquery. You can use pure Javascript but Jquery is very convenient.
A callback will be a JSON reply that the host page (the one doing the upload) can retrieve and act upon. For example, if the upload failed, you can notify the user. Or you can pass the record ID of the file after it was stored in a database.
First, you need to add a hidden iframe (mine is called upload_hidden) to your upload page.
Then you need to set the form to post to the hidden frame.
Then make sure you call it onload.
Now for the pseudo callback. The trick is to check every time the iframe loads new content and parse the results. The way I do it is to embed my JSON reply in a div from the upload script.
After processing my upload, my PHP code generates the JSON wrapped in a DIV.
And here is my JQuery code to parse the JSON from the PHP loaded into the hidden div.
The key thing to note are:
Every time the iframe is loaded, I look inside the iframe for anything inside a div called "upload_status." When the iframe is initially loaded with a blank placeholder, nothing happens because the content is empty. However, when it detects anything, I parse whatever is inside the div as my JSON string.
After uploading a file, here are the results. Obviously, you would need to hide the iframe after you do some testing.
To wrap up. This is one way to handle callbacks in an pseudo-AJAX file upload. There are probably other ways to do it but this was something quick and works for my needs.
Here is the example code.
So where are the "AJAX uploaders?"
Many of them are actually SWF (Flash based) uploaders billed as "jquery file upload plugins." I'm sure many of them work great but I prefer to avoid Flash as much as possible.
There are also HTML5 support in some new browsers for asynchronous file uploads via AJAX post but I've had problems with some browsers like Safari and problems with different file types.
Today, I will show you how to simulate an AJAX upload without the use of Flash. If you have done some googling, the most common way to do it is to use a hidden iframe. This is considered a hack but it works. There are some tutorials out there but mine will show you how to get a callback from your upload script using Jquery. You can use pure Javascript but Jquery is very convenient.
A callback will be a JSON reply that the host page (the one doing the upload) can retrieve and act upon. For example, if the upload failed, you can notify the user. Or you can pass the record ID of the file after it was stored in a database.
First, you need to add a hidden iframe (mine is called upload_hidden) to your upload page.
<body>
<iframe id="upload_hidden" name="upload_hidden" src="blank.html" style="display:none;"></iframe>
<form enctype="multipart/form-data" method ="POST" action ="upload_json.php" id ="upload_form">
<input type="file" name="upload_file"><button name="Upload" type="submit" value ="Upload">Upload</button>
</form>
</body>
Then you need to set the form to post to the hidden frame.
function setTarget() {
document.getElementById('upload_form').onsubmit=function() { document.getElementById('upload_form').target = 'upload_hidden';}
}
Then make sure you call it onload.
window.onload=setTarget;
Now for the pseudo callback. The trick is to check every time the iframe loads new content and parse the results. The way I do it is to embed my JSON reply in a div from the upload script.
After processing my upload, my PHP code generates the JSON wrapped in a DIV.
<?php
$finished = array ('status'=>'success','time'=>date('Y-m-d H:i:s',time()),'db_insert_id'=>$record_id, );
echo "<div id ='upload_status'>";
echo json_encode($finished);
echo "</div>"; ?>
And here is my JQuery code to parse the JSON from the PHP loaded into the hidden div.
$(document).ready(function() { $('#upload_hidden').load(function() { vara = $("#upload_hidden").contents().find("#upload_status").html();if (a !=null) { varobj = jQuery.parseJSON(a);if (obj.status == 'success') { alert ("file to saved to db as " + obj.db_insert_id); } // #end success } // #end a!=null }); // #end upload_hidden load });
The key thing to note are:
a = $("#upload_hidden").contents().find("#upload_status").html();
and
obj = jQuery.parseJSON(a)
Every time the iframe is loaded, I look inside the iframe for anything inside a div called "upload_status." When the iframe is initially loaded with a blank placeholder, nothing happens because the content is empty. However, when it detects anything, I parse whatever is inside the div as my JSON string.
After uploading a file, here are the results. Obviously, you would need to hide the iframe after you do some testing.
To wrap up. This is one way to handle callbacks in an pseudo-AJAX file upload. There are probably other ways to do it but this was something quick and works for my needs.
Here is the example code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function setTarget() {
document.getElementById('upload_form').onsubmit=function() { document.getElementById('upload_form').target = 'upload_hidden';}
}
$(document).ready(function() {
$('#upload_hidden').load(function() {
var a = $("#upload_hidden").contents().find("#upload_status").html();
if (a !=null) {
var obj = jQuery.parseJSON(a);
if (obj.status == 'success') {
alert ("file to saved to db as " + obj.db_insert_id);
} // #end success
} // #end a!=null
}); // #end upload_hidden load
});
window.onload=setTarget;
</script>
</head>
<body>
<iframe id="upload_hidden" name="upload_hidden" src="blank.html" style="display:none;"></iframe>
<form enctype="multipart/form-data" method ="POST" action ="upload_json.php" id ="upload_form">
<input type="file" name="upload_file">
<button name="Upload" type="submit" value ="Upload">Upload</button>
</form>
</body>
</html>
Labels:
AJAX,
coding,
Javascript,
jquery,
upload,
web,
web development,
XMLHttpRequest
Subscribe to:
Comments (Atom)