Develop Reference

How to identify unique devices using javascript?

I was wondering how streaming service providers like Netflix, Hulu, Sling.. et identify my device when I login using web Browser on my labtop.
I couldn't find any Javascript APIs to get a GUID or so.

You can use the fingerprintJS2 library for your project too.
https://fingerprintjs.com/
How this library gets fingerprints
Fingerprint.js collects all the unique features from a device/browser passing them through a hash function to provide a unique identifier.
Example
There are many other ways to get unique browser fingerprint.
The newest method to obtain browser information is called “Canvas Fingerprinting.” Simply put, websites are written in HTML5 code, and inside that code, there is a little piece of code that takes your browser’s fingerprint.
So, how are websites doing that, exactly? Let me explain.
This new tracking method that websites employ to obtain your browser fingerprint is enabled by new coding features in HTML5.
HTML5 is the coding language used to build websites. It’s the core fundamentals of every website. Within the HTML5 coding language, there’s an element which is called “canvas.”
Originally, the HTML element was used to draw graphics on a web page.
Wikipedia provides the following explanation on how exploiting the HTML5 canvas element generates browser fingerprinting:
“When a user visits a page, the fingerprinting script first draws text with the font and size of its choice and adds background colors. Next, the script calls Canvas API’s ToDataURL method to get the canvas pixel data in dataURL format, which is basically a Base64 encoded representation of the binary pixel data. Finally, the script takes the hash of the text-encoded pixel data, which serves as the fingerprint."
In plain English, what this means is that the HTML5 canvas element generates certain data, such as the font size and active background color settings of the visitor’s browser, on a website. This information serves as the unique fingerprint of every visitor.
In contrast to how cookies work, canvas fingerprinting doesn’t load anything onto your computer, so you won’t be able to delete any data, since it’s not stored on your computer or device, but elsewhere.
Source and further reading: https://pixelprivacy.com/resources/browser-fingerprinting/
https://multilogin.com/everything-you-need-to-know-about-canvas-fingerprinting/
By the way you can get much more information from Googling yourself.

I am using fingerprintjs.library for creating a browser fingerprint it works well with all device but when i test fingerprint in exact configuration device like laptop with exact configuration it generate same fingerprint.
Before implementation i read many blogs says canvas fingerprint generate unique base64 string but when i tested in device with same configuration it generate same canvas fingerprint. The canvas fingerprint is not unique in exact or similar device.
While using fingerprint.Js libary, i made some option disable like plugins, enumerate device, browser version because this are dynamic in nature on adding headphone in device fingerprint will read headphone information or generate fingerprint accordingly or same with browser version. fingerprint will vary if any of this thing change in future.
My requirement was to create a unique & constant fingerprint that donot change even after opening browser after somedays.

I suggest using localStorage and store a unique white-listed ID that gets verified on every login attempt.
localStorage.setItem('laazaz_id', '4587ff526d');
localStorage.getItem('laazaz_id'); //returns 4587ff526d
docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

What is the best way to upload files in a modern browser

I want to upload a (single) file to a server and show the progress of the upload.
I know I can upload a file using HTTP POST. I'm not familiar with web-sockets, but as I understand, binary data can also be sent that way and because web sockets are bi-directional I could get the progress of the upload.
I'm not worried about older browsers so iframe's and flash solutions aren't very appealing unless there is a significant advantage in going that route.
I'm also curious as to the best server-side technology. Are their advantages to using a WSGI server like Django? Or maybe non-blocking I/O technology like Node.js? I'm not asking if web framework x is better than web framework y, or server x is better than server y. But simply what the ideal technology should have in order to facility uploads in the client.
Update: It seems like the server side does not have bearing on the technologies/API's available on the client to facilitate uploads.

Edit (2017-10-17): As of now, there is also the option to use Fetch API. It offers essentially the same capabilities as XMLHttpRequest behind a more modern promise-based API. There is a polyfill for browsers that don't support window.fetch() natively (which is mainly Internet Explorer and older Safari versions right now).
XMLHttpRequest vs. Web sockets vs. Something else
Clearly XMLHttpRequest. Its capabilities in modern browsers are enormous and cover almost all scenarios. It will produce a standard POST or PUT request, any web server and framework combination can deal with that.
While web sockets are nice for some scenarios, it's a different protocol that adds lots of complexity - they are only worth using if you need real-time responses from the server. And as you noted yourself, other approaches like Flash are merely ugly hacks.
Sending binary data
Normally, you won't have direct access to files. So you will have an <input type="file"> form field somewhere on your page and wait for the user to choose a file. The options then are:
Sending only the file contents: request.send(input.files[0]). The request body will be the file's contents and nothing else, no encoding will be performed and no metadata like file name will be transmitted. Browser compatibility: Chrome 7, Firefox 3.6, Opera 12, IE 10.
Sending the data of the entire form: request.send(new FormData(input.form)). Here the form contents will be encoded as multipart/form-data, meaning that you can send multiple form fields and metadata like field and file names will be transmitted as well. You can also modify the FormData object before sending it. Depending on the server-side framework, handling this request might be simpler than raw data, there are typically many helpers you can use. Browser compatibility: Chrome 6, Firefox 4, Opera 12, IE 10.
Sending a typed array: just in case you don't have a file but merely want to send some binary data you generate on the fly. No extra encoding is being performed here, so as far as the server side is concerned this works like sending file contents. Browser compatibility: Chrome 9, Firefox 9, Opera 11.60, IE 10.
Displaying upload progress
You can listen to progress events on XMLHttpRequest.upload. The progress events have loaded and total properties that allow determining how far you've got with your request. Browser compatibility: Chrome 7, Firefox 3.5, Opera 11.60, IE 10.
JavaScript libraries
There are of course existing libraries wrapping the functionality outlined here. These are mentioned in other answers, searching on the web will certainly turn up even more. I explicitly don't want to propose any libraries here - which of them if any you should use is purely a matter of preference.

My answer is quite late but here it goes:
Short answer:
XMLHttpRequest is the best way to upload files in a modern browser.
What is XMLHttpRequest?
XMLHttpRequest is a JavaScript object that was designed by Microsoft and adopted by Mozilla, Apple, and Google. It's now being standardized in the W3C. It provides an easy way to retrieve data from a URL without having to do a full page refresh. A Web page can update just a part of the page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming.
Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP (including file and ftp).
The XMLHttpRequest object has gotten a facelift in the Html5 specifications. Specifically the XMLHttpRequest Level 2.
Advantages:
Handling of byte streams such as File, Blob and FormData objects for uploading and downloading
Progress events during uploading and downloading
Cross-origin requests
Allow making anonymous request - that is not send HTTP Referer
The ability to set a Timeout for the Request
Uploading is happening in the background
The page the user is on remains intact
Does not require any change to the server side, so existing server side logic should remain unchanged, which makes adapting this technology that much easier.
The Html5 Progress Event:
As per the Html5 Progress Events spec, the Html5 progress event provides, among others, the following information :
total - Total bytes being transferred
loaded - Bytes uploaded thus far
lengthComputable - Specifies if the total size of the data/file being uploaded is known
Using the information above, it is fairly easy to provide the "Time remaining" information to the user.
Keep the user informed:
Information about the file that can be made available to the user:
File Name
File Size
Mime Type
A Progress bar with percent complete
The upload speed or upload bandwidth
The approximate time remaining
The bytes uploaded thus far
A response from the server side
File Upload using XMLHttpRequest Demo
Please check "Uploading files using Html5 with Progress indication demo" for an example. All of the JavaScript code required is in the page but no CSS is included. For security reasons, the file types are limited to jpg, png, gif and txt. Max file size is 2MB.
XMLHttpRequest Browser Compatibility:

Probably the Javascript's file API is the best way in modern browsers:
http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/
http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/
Server side wise... I think any of the main frameworks has the HTTP file POST feature well covered.

Files can be uploaded via AJAX.
Use the jQuery form plugin. It does all the dirty work of binding the files to the form and serializing it. It is also capable of showing upload progress.
Server stack hasn't got much to do with it.
Demo

I personally like blueimp jQuery File Upload Plugin (https://blueimp.github.io/jQuery-File-Upload/)
File Upload widget with multiple file selection, drag&drop support,
progress bars, validation and preview images, audio and video for
jQuery. Supports cross-domain, chunked and resumable file uploads and
client-side image resizing. Works with any server-side platform (PHP,
Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard
HTML form file uploads.
Demos:
Basic
Basic Plus
Basic Plus UI
AngularJS
Download (GitHub):
https://github.com/blueimp/jQuery-File-Upload

Check if object fits into browser cache

I have a single page application, which loads a JSON data file from a server and displays it on the client. The data file only changes once per day, so after fetching it, I want to keep it cached on the client. So far, I have been using jStorage and am happy with the overall result. One thing is problematic though: according to the jStorage Browser support page, the cache size varies from browser to browser.
So my question: can I somehow find out if jStorage will be able to store all my data? The jStorage website itself does not give any clues to that.
Alternatively, since I'm only storing one big object, I could use a plug-in like sizeOf to check the object size before saving it, but I don't know if that is a reliable approach.

I am not sure how jStorage implements, you say 5mb so I guess it's using localstorage. Have you tried indexedDB which is browser native and theoretically limit to your hard drive capacity.
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

Simperium and binary (image / video) asset files from JS

Simperium looks like an awesome way to sync data across a variety of platforms and to deal with on/offline access from mobile.
For a project I'm working on some of the data is in the form of generated image and video files. I can't find any information about whether it is possible to sync this kind of data through Simperium (I guess I could base64 encode the images but it seems like a hack).
Or would I need to sync the URLs and then manually download these resources and somehow store them locally?

Simperium has basic support for binary files on the iOS side, currently in testing. This isn't yet available in the JavaScript library, but it will be. The way it works is similar to what you described. Simperium can handle the syncing of both a URL and its associated binary content in cases where that makes sense.
On iOS, binary files are stored to the local file system (though small files can indeed be stored as base64 encoded strings if you prefer).
In JavaScript, if you're working on the client side, the situation is less clear given the storage limits imposed by browsers, but you always have the option of syncing and using standard links depending on what you're trying to do. On the server side, there are of course more options. If you have some uses cases to share, you should get in touch.

Creating/modifying images in JavaScript

Is it possible to dynamically create and modify images on a per pixel level in JavaScript (on client side)? Or has this to be done with server based languaged, such as PHP?
My use case is as follows:
The user opens webpage and loads locally stored image
A preview of the image is displayed
The user can modify the image with a set of sliders (pixel level operations)
In the end he can download the image to his local HDD
When searching in the web I just found posts about using IE's filtering method, but didn't find anything about image editing functions in JavaScript.

Some browsers support the canvas:
http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

This has to be done on the server side. One thing you might look at doing is allowing all the editing to go on client side, and then in the end POST the final image (via AJAX) to the server to allow it to return it to you as the correct MIME type, and correctly packed.

You may want to check out Processing.js. John Resig of jQuery fame wrote it. It supports pixel processing, unfortunately only Firefox 3 can handle it sufficiently.

Also look at data URIs (though IE versions below 8 don't support them, unfortunately!)

You can imagine a set of JS tools that will allow the user to define what kind of transformation he wants to do, but the final work of transformation MUST be done on a server side. JS on the client side is unable to create a file, for security reason.

Try Allicorn's Image Retargetter - it sounds like that's what you're looking for.

Local image manipulation in JavaScript should be possible - have a look at Defender of the Favicon. ;-) The question is how to get the original image from the file system into your page (I don't know of any other way than doing a HTTP upload to the server first).