background preloader

Mozilla Developers

Facebook Twitter

Firefox OS Help. Firefox for Android Help. Using files from web applications. Using the File API, which was added to the DOM in HTML5, it's now possible for web content to ask the user to select local files and then read the contents of those files.

Using files from web applications

This selection can be done by either using an HTML <input> element or by drag and drop. If you want to use the DOM File API from extensions or other browser chrome code, you can; however, note there are some additional features to be aware of. Using web workers - MDN Docs. Dedicated Web Workers provide a simple means for web content to run scripts in background threads.

Using web workers - MDN Docs

Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator. However, they work within a global context different from the current window (using the window shortcut instead of self in order to get the current global scope within a Worker will return, in fact, an error). Drag and drop. Firefox and other Mozilla applications support a number of features for handling drag and drop.

Drag and drop

This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. A translucent representation of what is being dragged will follow the mouse pointer during the drag operation. The drop location may be a different application. Web sites, extensions, and XUL applications may make use of this functionality to customize what elements may be dragged, the drag feedback, as well as specify where elements may be dropped.

This section covers drag and drop in Firefox 3.5 (Gecko 1.9.1) and later. DOM Storage. Summary.

DOM Storage

IndexedDB. IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution. CSS media queries. AJAX. Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object.

AJAX

When these technologies are combined in the Ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions. Although X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model. Documentation Getting Started. Using CSS transforms. By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow.

Using CSS transforms

This guide provides an introduction to using transforms. CSS transforms are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements. These transformations include rotation, skewing, scaling, and translation both in the plane and in the 3D space. CSS transforms properties Two major properties are used to define CSS transforms: transform and transform-origin transform-origin. CSS animations. CSS animations make it possible to animate transitions from one CSS style configuration to another.

CSS animations

Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints along the way. There are three key advantages to CSS animations over traditional script-driven animation techniques: They're easy to use for simple animations; you can create them without even having to know JavaScript.

The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they're well made). Configuring the animation. Using HTML5 audio and video. HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents.

Using HTML5 audio and video

Embedding media in your HTML document is trivial: Using CSS gradients. CSS gradients are new types of <image> added in the CSS3 Image Module.

Using CSS gradients

Using CSS gradients lets you display smooth transitions between two or more specified colors. Using Application Cache - MDN Docs. Introduction HTML5 provides an application caching mechanism that lets web-based applications run offline.

Using Application Cache - MDN Docs

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: Canvas. SVG. JavaScript. JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. Document Object Model (DOM) The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. HTML5. HTML5 is the latest evolution of the standard that defines HTML. CSS. HTML. Developer Network. WebSockets.