William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

Tag Archives: html5

HTML5 Web Workers

HTML5 Web workers

1. What Web Worker can do?
  • Caching data for use in your pages.
  • Processing large amounts of data in arrays or large JSON response from web service.
  • Managing a database connection along with adding and removing records for the main page.
  • Automated race track betting agent.
  • Analyzing video.
  • Spell checking the page s the user types.
  • Polling web services and alerting the main page when something happens.
  • Image processing of data in a canvas.
  • Code syntax or other language highlighting.
  • Pre-fetching data based on what your user is doing.
  • Managing advertising for your page.
2. keys to use HTML5 Web Workers
  • Without Web Workers, Javascript is a single-threaded, meaning it can do only one thing at a time.
  • If you give a JavaScript program too much to do, you might get the slow script dialog.
  • Web workers handle tasks on a separate thread so your main JavaScript code can continue to run and your UI remains responsive.
  • The code for a Web worker is in a separate file from your page’s code.
  • Web workers don’t have access to any of the functions in the code in your page or the DOM.
  • The code in your page and the web worker communicate via messages.
  • To send a message to a worker, use PostMessage.
  • Your can send strings and objects to a worker via postMesage, you can’t send functions to a worker.
  • Receive messages back from workers by setting the worker’s onmessage property to a handler function.
  • A worker receives messages from the code in your page by setting its onmessage property to a handler function.
  • When a worker is ready to send back a result, it calls postMessage and passes the result as the argument.
  • Worker results are encapsulated in an event object and placed in the data property.
  • You can find out which worker sent the message using the event.target property.
  • Messages are copied, not shared, btw your main page code and the worker.
  • You can use multiple workers for large computations that can be split into multiple tasks, such as computing a fractal visualization or ray tracing an image.
  • Each worker runs in its own thread, so if your computer has a multicore processor, the workers are run in parallel, which increases the speed of the computation.
  • You can terminate a worker by calling worker.terminate() form the code in your page. This will abort the worker script. A worker can also stop itself by calling close().
  • Workers also have an onerror property. You can set this to an error handling function that will be called if your worker has a script error.
  • To include and use JavaScript libaries in your worker file, use importScripts.
    //You can also use importScripts with  JSONP.
    //Implement the callback you pass in the URL query in the worker file.
    function makeServerRequest() {
      importScripts(('http://someserver.com?callback=handleRequest');
    }
    function handleRequest(response) {
      postMessage(response);
    }
    makeServerRequest();
  • While workers do not have assess to the DOM or functions in your main codes, they can use XMLHttpRequest and Local Storage.

HTML 5 features

HTML 5 features

Here I list HTML 5 features which is original from Modernizr website.
I used or am interested in some of them such as: History API, hashChange, indexedDB, localStorage, SessionStorage, Web Sockets and Web-Workers.

  • applicationCache
  • Canvas
  • Canvas Text
  • Drag ‘n Drop
  • hashchange
  • History (pushState)
  • HTML5 Audio
  • HTML5 Video
  • IndexedDB
  • Input Attributes
  • Input Types
  • localStorage
  • postMessage
  • sessionStorage
  • Web Sockets
  • Web SQL Database
  • Web Workers

HTML5 application cache

Besides the browser cache, HTML5 has its cache mechanism: HTML5 application cache. The following are helpful link and article from Mozilla:

Using the application cache

HTML5 provides an application caching mechanism that lets web-based applications run offline. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.

Using an application cache gives an application the following benefits:

  • Offline browsing: users can navigate a site even when they are offline.
  • Speed: cached resources are local, and therefore load faster.
  • Reduced server load: the browser only downloads resources that have changed from the server.
<html manifest="example.appcache">
</html>

The process for loading documents and updating the application cache is specified in greater detail below:

  1. When the browser visits a document that includes the manifest attribute, if no application cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache.
  2. Subsequent visits to that document cause the browser to load the document and other assets specified in the manifest file from the application cache (not from the server). In addition, the browser also sends a checking event to the window.applicationCache object, and fetches the manifest file, following the appropriate HTTP caching rules.
  3. If the currently-cached copy of the manifest is up-to-date, the browser sends a noupdate event to the applicationCache object, and the update process is complete. Note that if you change any cached resources on the server, you must also change the manifest file itself, so that the browser knows it needs to fetch all the resources again.
  4. If the manifest file has changed, all the files listed in the manifest—as well as those added to the cache by calling applicationCache.add()—are fetched into a temporary cache, following the appropriate HTTP caching rules. For each file fetched into this temporary cache, the browser sends a progress event to the applicationCache object.
    If any errors occur, the browser sends an error event, and the update halts.
  5. Once all the files have been successfully retrieved, they are moved into the real offline cache automatically, and a cached event is sent to the applicationCache object. Since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is reloaded (either manually or programatically).

HTML5 & CSS3

HTML5 & CSS3

While searching HTML5’s selector new attributes, I found a helpful website:

http://html.nhndesign.com/html_guide/?css3

You can find some useful information about the new features in HTML5 and CSS3, including live examples and browser compatibility. With the reference, I add a CSS class by using selector:

#contents .box::first-letter {
  font-size: 2.5em;
  color: #990000;
  weight: bolder;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #d1e8ed;
}

This will make the first letter of a paragraph to be more eye-catching.

HTML5: input attributes

HTML5 <input> Tag

Attribute Value Description
accept audio/*
video/*
image/*
MIME_type
Specifies the types of files that the server accepts
(only for type=”file”)
alt text Specifies an alternate text for images (only for type=”image”)
autocomplete on
off
Specifies whether an <input> element should have autocomplete
enabled
autofocus autofocus Specifies that an <input> element should automatically get focus when the page
loads
checked checked Specifies that an <input> element should be pre-selected when the page
loads (for type=”checkbox” or type=”radio”)
disabled disabled Specifies that an <input> element should be disabled
form form_id Specifies one or more forms the <input> element belongs to
formaction URL Specifies the URL of the file that will process the input control when
the form is submitted (for type=”submit” and type=”image”)
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form-data should be encoded when submitting it to the
server (for type=”submit” and type=”image”)
formmethod get
post
Defines the HTTP
method for sending data to the action URL (for type=”submit” and type=”image”)
formnovalidate formnovalidate Defines that form elements should not be validated when submitted
formtarget _blank
_self
_parent
_top
framename
Specifies where to display the response that is received after submitting
the form (for type=”submit” and type=”image”)
height pixels Specifies the height of an <input> element (only for type=”image”)
list datalist_id Refers to a <datalist> element that contains pre-defined options for an
<input> element
max number
date
Specifies the maximum value for an <input> element
maxlength number Specifies the maximum number of characters allowed in an <input> element
min number
date
Specifies a minimum value for an <input> element
multiple multiple Specifies that a user can enter more than one value in an <input>
element
name text Specifies the name of an <input> element
pattern regexp Specifies a regular expression that an <input> element’s value is
checked against
placeholder text Specifies a short hint that describes the expected value of an <input>
element
readonly readonly Specifies that an input field is read-only
required required Specifies that an input field must be filled out before submitting the
form
size number Specifies the width, in characters, of an <input> element
src URL Specifies the URL of the image to use as a submit button (only for
type=”image”)
step number Specifies the legal number intervals for an input field
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Specifies the type <input> element to display
value text Specifies the value of an <input> element
 
width pixels Specifies the width of an <input> element (only for type=”image”)


HTML5 Global Attributes

Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
class Specifies one or more classnames for an element (refers to a class in a style sheet)
contenteditable Specifies whether the content
of an element is editable or not
contextmenu Specifies a context menu for an element. The context menu appears when a
user right-clicks on the element
dir Specifies the text direction for the content in an element
draggable Specifies whether an element is draggable or not
dropzone Specifies whether the dragged data is copied, moved, or linked, when dropped
hidden Specifies that an element is not yet, or is no longer, relevant
id Specifies a unique id for an element
lang Specifies the language of the element’s content
spellcheck Specifies whether the element is to have its spelling and grammar checked or
not
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
title Specifies extra information about an element