Ref: http://teddy-chen-tw.blogspot.tw/2011/12/scrum-1.html
==========================================
- Sep 07 Sun 2014 16:35
[SCRUM] Scrum 是什麼（1）：雙重回饋機制
- Aug 20 Wed 2014 15:39
[WEB] HTML5: WebWorker
== HTML5_WebWorker_Tutorial ==
** Update: 2012/7/17
[ The Category of Web Worker ]
> Dedicated Worker:
The worker is dedicated to the script(the boss script) loading the worker.
Other scripts cannot communicate with the worker.
> Shared Worker:
The worker is shared with multiple scripts, not only the boss script.
Different scripts can communicate with the worker
[ The Scope ]
> In the Worker script, there is no "window" object.
Instead, "self (this)" reference the global scope for the worker.
But, notice that "self" in the Worker is not the same thing as "window" in the HTML page.
[ The Security ]
> Workers has no access to
* The DOM (it's not thread-safe), the window, the document, the parent object
> Workers has access to
* The navigator object, XMLHttpRequest, the application cache, the location object (read-only)
* Timing functions : setTimeout()/clearTimeout() and setInterval()/clearInterval()
* Importing external scripts : importScripts()
- importScripts('script1.js', 'script2.js');
* Spawning other web workers
- URIs within subworkers are resolved relative to their parent worker's location
- The same origin policy
- Example : http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html#delegation
> The same origin policy :
Worker scripts must be external files with the same scheme as their calling page.
Thus, you cannot load a script from a data: URL or javascript: URL,
and an https: page cannot start worker scripts that begin with http: URLs.
> Restriction with local access :
Due to Google Chrome's security restrictions, workers will not run locally (e.g. from file://) in the latest versions of the browser.
Instead, they fail silently!
To run your app from the file:// scheme, run Chrome with the --allow-file-access-from-files flag set.
NOTE: It is not recommended to run your primary browser with this flag set.
It should only be used for testing purposes and not regular browsing.
Other browsers do not impose the same restriction.
== Dedicated Worker ==
[ Create a Worker ]
> var worker = new Worker('example.js');
[ Communicate between The Boss and The Worker ]
> Using worker.postMessage() in the boss scope / self.postMessage() in the worker scope to pass message.
Using the event "onmessage" to act on the message when a message passing event happens.
> The boss :
var worker = new Worker('example.js');
worker.onmessage = function (e) {
var msg = e.data;
// Do sth with the message (data) passed in.
}
worker.postMessage(msg);
> The Wroker :
self.onmessage = function (e) {
var msg = e.data;
// Do sth with the message (data) passed in.
self.postMessage(processedData); // Report the processed data back to the boss.
}
[ Inline Workers ]
> By simulating the noraml case of importing script, we can build a WebWorker on the boss page :
1) New a BlobBuilder object
* var bb = new BlobBuilder(); // window.WebKitBlobBuilder in CH 12, window.MozBlobBuilder in FF 6
2) Append the code to that BlobBuilder object (making a script)
* bb.append(... ... ...);
3) Create a object URL to that BlobBuilder object by using window.URL.createObjectURL()
* var blobURL = window.URL.createObjectURL(bb.getBlob()); // In CH 10+, window.webkitURL.createObjectURL()
4) Using the object URL on the WebWorker exactly like a path to the script
* var worker = new Worker(blobURL);
5) Terminate the worker :
* Notice : killed immediately without an opportunity to complete its operations or clean up after itself.
* In the boss script, call worker.terminate();
* In the worker script, call self.close();
> Blob URLs are unique and last for the lifetime of your application (e.g. until the document is unloaded) if not released.
* Release the object URL by calling window.URL.revokeObjectURL()
- window.URL.revokeObjectURL(blobURL); // // In CH 10+, window.webkitURL.revokeObjectURL()
> In Chrome, there's a nice page to view all of the created blob URLs: chrome://blob-internals/.
> Import scripts within the Inline Worker:
importScripts() requires the same origin policy, however a blob URL is prefixed with "blob:".
The "blob:" prefix would cause the browser to think the blob URL is not from the same origin so
a cross origin error would occur.
The solution to this cross origin error is to manually build a legal URL for importScripts().
[ Error Handling ]
> The boss can handle the error returned by the worker by registering an "onerror" event.
> The event doesn't bubble and is cancelable;
to prevent the default action from taking place, the worker can call the error event's preventDefault() method.
> Error event object (err) :
The 3 main useful properties in err :
* err.filename = the name of the worker script that caused the error.
* err.lineno = the line number where the error occurred.
* err.message = a meaningful description of the error.
- Aug 20 Wed 2014 15:37
[WEB] HTML5: FileSystem APIs
== HTML5_FileSystem APIs _Tutorial ==
** Update :
== HTML5_FileSystem APIs Async_Tutorial ==
** HTML5ROCKS : http://www.html5rocks.com/en/tutorials/file/filesystem/
[ The Categories of FileSystem APIs ]
> Reading and manipulating files: File/Blob, FileList, FileReader
> Creating and writing: BlobBuilder, FileWriter
> Directories and file system access: DirectoryReader, FileEntry/DirectoryEntry, LocalFileSystem
[ The Structure of FileSystem APIs ]
> File APIs: Directories and System
* FileSystem
1) Represent a file system
2) Will be passed as the argument of a successful callback of window.requestFileSystem()
* Entry
- DirectoryEntry : Entry
1) Represent an entry to access directory in a file system
2) FileSystem.root is the instance of DirectoryEntry
3) Will be passed as the argument of a successful callback of DirectoryEntry.getDirectory()
- FileEntry : Entry
1) Represent an entry to access file in a file system
2) Will be passed as the argument of a successful callback of DirectoryEntry.getFile()
* DirectoryReader
1) The object to read a list of entries from a specific directory.
2) Returned by calling DirectoryEntry.createReader()
> File APIs: Writer
* BlobBuilder
1) The object to construct Blobs
2) Returned by calling new BlobBuilder();
* FileSaver
- FileWriter : FileSaver
1) The object to multiple write actions, saving a single Blob
2) Will be passed as the argument of a successful callback of fileEntry.createWriter()
[ How to Access Files ]
1) Reuqest a FileSystem by calling window.requestFileSystem( )
1-1) Request the quota for the PERSISTENT storage if neccessary
2) Get the DirectoryEntry of the root directory of the FileSystem, which is FileSystem.root
3) Get/Create the sub directory under the root by calling FileSystem.root.getDirectory(path, )
4) Get/Create the FileEntry of file under the specific directory by calling DirectoryEntry.getFile()
5) Get the file by calling FileEntry.file()
6) Manipulate the file
[ Manipulate Files ]
* Read the file:
- using the FileReader object, say, FileReader.readAsText(file)
- do sth when reading is done by registering a FileReader.onloadend event
* Write to the file:
- getting the FileWriter object by calling FileEntry.createWriter(successCallback, errorCallback)
- using the FileWriter object to write, say, FileWriter.write(bb.getBlob('text/plain'))
* Modify the file content:
- before write to the file, move the index to the desired position by calling FileWriter.seek(theDesiredPosition)
* Remove the file:
- calling FileEntry.remove(successCallback, errorCallback)
* Copy user-selected files:
- get the file selected, say,
<input type="file" id="myfile" multiple />
document.querySelector('#myfile').onchange = function(e) {
var files = this.files;
function copyFiles(fileSystem) {
// Duplicate each file the user selected to the app's fs.
for (var i = 0, file; file = files[i]; ++i) {
// Capture current iteration's file in local scope for the getFile() callback.
fileSystem.root.getFile(file.name, {create: true, exclusive: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
fileWriter.write(file); // Note: write() can take a File or Blob object.
}, errorHandler);
}, errorHandler);
}
}
window.requestFileSystem(window.TEMPORARY, 1024*1024, copyFiles, errorHandler);
};
[ Manipulate Directories ]
> Create a subdirectory
- using DirectroyEntry.getDirectory()
- the error arises when attempting to create a directory whose immediate parent does not exist.
The solution is to create each level directory in a loop or recursively.
> Read a directory
- keep calling DirectroyEntry.DirectoryReader.readEntries() until no more results are returned.
> Remove a directory
- calling DirectroyEntry.remove(successCallback, errorCallback)
- attempting to delete a non-empty directory results in an error.
The solution is to remove each level directory in a loop or recursively.
[ Common Manipulation ]
> Copy a File/Directory
- using FileEntry/DirectroyEntry.copyTo(destinationDirectoryEntry)
- This method automatically does a recursive copy on folders.
> Move/Rename a File/Directory
- using FileEntry/DirectroyEntry.moveTo(newParentDirectoryEntry, optionalNewFileName)
- by keeping the origin DirectoryEntry as the new parent DirectoryEntry and giving an new name,
we can rename a File/Directory
[ FileEntry to URL ]
> calling FileEntry.toURL(), we can convert the URL to the FileEntry, say
- document.createElement('img').src = fileEntry.toURL(); // filesystem:http://example.com/temporary/myfile.png
> calling window.resolveLocalFileSystemURL(theFileEntryURL, successCallback, opt_errorCallback),
we can convert the FileEntryURL back to the FileEntry
[ Callback Hell ]
> In order to achieve asynchronous operations, async FileSystem APIs use
callbacks a lot (layers on layers of callbacks), so the developer is easily to get lost in the Callback Hell.
Fortunately, we can escape from the Callback Hell, yet still working in the asyncronous state,
please refer to Sync FileSystem APIs and Web Workers.
== HTML5_FileSystem APIs Sync_Tutorial ==
** HTML5ROCKS : http://www.html5rocks.com/en/tutorials/file/filesystem-sync/
[ Sync vs. Async ]
> For the most part, the synchronous API is exactly the same as its asynchronous cousin.
> The major deviations are:
* The synchronous API can only be used within a Web Worker context,
whereas the asynchronous API can be used in and out of a Worker.
* Callbacks are out. API methods now return values, for example,
- In Async context, the FileEntry are thrown into the successCallback of DirectoryEntry.getFile()
- In Sync context, the FileEntry are returned by DirectoryEntry.getFile()
* The methods are appended with "Sync", say, requestFileSystemSync(), FileEntrySync, etc...
[ Self, not Window ]
> In the WebWorker scope, use self.requestFileSystemSync() instead of window.requestFileSystem()
[ Deal with Quota ]
> Currently, it's not possible to request PERSISTENT quota in a Worker context.
> The workaround solution
1) worker.js: Wrap any FileSystem API code in a try/catch so any QUOTA_EXCEED_ERR errors are caught.
2) worker.js: If you catch a QUOTA_EXCEED_ERR, send a postMessage('get me more quota') back to the main app.
3) main app: Go through the window.webkitStorageInfo.requestQuota() dance when #2 is received.
4) main app: After the user grants more quota, send postMessage('resume writes') back to the worker to inform it of additional storage space.
[ How to Handle Error without The errorCallBack ]
> Catch the error, then post the error message to the main page, say,
Function reportError(err) { postMessage('ERROR: ' + err.toString() ); }
try {
// When error ocurrs, error would be thrown to the catch block below.
} catch (err) {
reportError(err);
}
[ Passing around Files, Blobs, and ArrayBuffers ]
> Post the messages(files) to the main page upon completing manipulating the files
> According to browser support, the data types could be messaged are
* String => all browers support
* JSON object => all browsers support (should be)
* Files, Blobs, and ArrayBuffers => browser capable of structured clone algorithm supports, say, Chrome
[ Access the same FileSystem ]
> Utilize FileSystem: URL
1) get the FileSystem: URL by calling DirectoryEntry/FileEntry.toURL()
2) post the FileSystem: URL to the main page
3) retrieve the DirectoryEntry/FileEntry by calling
window.resolveLocalFileSystemURL() / window.resolveLocalFileSystemSyncURL()
4) Having the same DirectoryEntry/FileEntry, the main page and the worker page can access the same FileSystem
- Aug 20 Wed 2014 15:12
[WEB] HTML5 : Drag and Drop
== HTML5 : Drag and Drop ==
** Update: 2012/7/2 **
[ How to Make Drag and Drop Enabled ]
> Generally 5 items to define
* Define a draggable target.
* Define the data the draggable target carries.
* Define a drop area.
* Define what to do with the data the draggable target carries.
* Define what to do after dropping if required
[ Define a draggable target ]
> Set the draggable attribute to true on the element that you wish to make draggable.
* <div id="slogan" draggable="true">Hello World</div>
* By default
- All the elments are "draggable=false", except for
- <img> and <a> are "draggable=true".
[ Define the data the draggable target carries ]
> Use the Event.dataTransfer object (Event is the event object)
* Register the "ondragstart" event to attach the data to the draggable target
* slogan.ondragstart = function (e) {
e.dataTransfer.setData("text/plain", "Hello World");
}
> dataTransfer.setData(String dataType, String dataValue)
* It is possible to set multiple data items.
* dataType
- has two purposes
a) Specify the type of data, coubld be MIME-type like such as text/plain or image/jpeg or custom.
With dataType, we can check if this is acceptable data type when inserting the target to the drop location.
b) Use as the key for retrieving or clearing the dataValue.
- can provide data in multiple formats, that is, attach the multiple data on one draggable target.
* dataValue = the value of data
> dataTransfer.getData(String dataType)
> dataTransfer.clearData([optional] String dataType)
* If no dataType is given, all the data would be cleared
> dataTransfer.setDragImage(Resource img, Int Xoffset, Int YOffset)
* To set the image when dragging.
* Set the drag image on "ondragstart".
* img = typically an image element but it can also be to a canvas or any other element.
> Set the effect on dragging
* event.dataTransfer.effectAllowed :
https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Effects
[ Define a drop area ]
> By default, the browser prevents any from happening when dropping sth onto the HTML element.
So, to make an elment a drop area, just stop the browser to do the default action.
That is to register the event on "ondragover" and "ondragenter".
> dropArea.ondragover/ondragenter = funciton (e) {
if (e.preventDefault) { e.preventDefault(); }
return false;
} // Registering "ondragover" and "ondragenter" both is for the browser compatibility.
[ Define what to do with the data the draggable target carries ]
> Basically two things to do
* check if the data type is valid
* get the data value and do sth
> Check the data type
* can register the event of checking on "ondragover"/"ondragenter" or "ondrop".
* dropArea.ondragover/ondragenter = function (e) {
var isLink = e.dataTransfer.types.contains("text/uri-list");
if (isLink) event.preventDefault();
}
OR
dropArea.ondrop = function (e) {
var types = e.dataTransfer.types;
var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
types = supportedTypes.filter(function (value) { return types.contains(value); });
if (types.length) {
var data = e.dataTransfer.getData(types[0]); }
e.preventDefault();
}
> Get the data and do sth
* Remeber to cancel the default action on "ondrop" event.
[ Define what to do after dropping if neccessary ]
> Register the "ondragend" event handler on the dragging target.
[ Summary of the events ]
> For the draggable target :
* dragTarget.ondragstart = function (e) {
// Attach the data to the draggable target.
// Set the little drag image.
}
* dragTarget.ondragend = function (e) {
// Define what to do after dragging.
}
> For the drop area :
* dropArea.ondragover/ondragenter = function (e) {
// Prevent the default action to define a drop area.
// Check the type of data (here or "ondrop").
}
* dropArea.ondrop = function (e) {
// Check the type of data (here or "ondragover/ondragenter").
// Get the transfered data and do sth.
// Remmeber to prevent the default action.
}
* dropAre.ondragleave = function (e) [
// Define sth to do when leaving wothout dropping.
}
- Aug 05 Tue 2014 15:27
[CS] REST
淺談 REST 軟體架構風格 (Part.I) – 從了解 REST 到設計 RESTful！
http://blog.toright.com/posts/725/representational-state-transfer-%E8%BB%9F%E9%AB%94%E6%9E%B6%E6%A7%8B%E9%A2%A8%E6%A0%BC%E4%BB%8B%E7%B4%B9-part-i-%E5%BE%9E%E4%BA%86%E8%A7%A3-rest-%E5%88%B0%E8%A8%AD%E8%A8%88-restful%EF%BC%81.html
- Jul 17 Thu 2014 14:56
[WEB] Mouse Events
Javascript Madness - http://unixpapa.com/js/
------------------------------------------------------------------
- Jul 17 Thu 2014 14:54
[WEB] Keyboard Events
Javascript Madness - http://unixpapa.com/js/
--------------------------------------------------------
- Jul 16 Wed 2014 22:04
[WEB] scrollY v.s. body.scrollTop v.s. documentElement.scrollTop v.s. pageYOffset
window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事， 注IE9 开始支持此属性。
window.scrollY 被Firefox, Google Chrome , Safari支持 不关doctype的事, 注IE9 不支持此属性
- Jun 04 Wed 2014 15:49
[Design] How to Get a Professional Look With Color
http://www.webdesignerdepot.com/2009/12/how-to-get-a-professional-look-with-color/
